利用 background 和 filter 模糊指定區域

背景知識：background-size: cover;，background-attachment:fixed;，filter:blur()

難題：

一般，咱們會經過filter:blur()去實現背景高斯模糊，可是缺點很明顯，整個背景都模糊了，能不能模糊其中指定的一塊呢？好比：

<header>
  <div class="content"></div>
</header>

header {
  width:100vw;
  height:100vh;
  background:url('https://xianshenglu.github.io/css/img-displayed/frosted-glass-tiger.jpg') no-repeat 0/cover fixed;
}
.content {
  width:50%; 
  height:50%;
  background:pink;
}

能不能只模糊 .content區域呢？

嘗試：

• 經過半透明的背景和filter:blur來實現

.content {
  width:50%; 
  height:50%;
  background:rgba(255,255,255,0.5);
  filter:blur(20px)
}

固然效果是不太好的：

方案：

• 把 .content 的背景換成和父元素同樣，再使用 filter:blur()即：

.content {
  width:50%; 
  height:50%;
  background:url('https://xianshenglu.github.io/css/img-displayed/frosted-glass-tiger.jpg') no-repeat 0/cover fixed;
  filter:blur(20px)
}

效果：

原理：

background-size:cover和background-attachment:fixed，這兩個屬性搭配致使了，父子元素雖然大小不同，可是背景是重合的，即便加上

margin-left:200px;

改變了位置，背景圖仍是重合的，這個時候模糊子元素就像是模糊了父元素背景的某一部分同樣，如圖：

這是由於：
當 background-size:cover和background-attachment:fixed 一塊兒被設置時，這就比如給視口設置了一個position:fixed定位的背景圖，而後以前設置背景圖的元素能夠從它的背景中看到一部分視口的背景圖，可是其餘元素看不到，譬如：

header {
  width:100vw;
  height:100vh;
  margin-top:200px;
  background:url('https://xianshenglu.github.io/css/img-displayed/frosted-glass-tiger.jpg') no-repeat 0 0/cover fixed;
}

仔細看下面的 gif:

header元素上方的margin-top:200px;致使了空白，可是滾動的時候，背景並無滾動，咱們透過元素的滾動能夠看到剩餘的背景圖。

參考文檔：

CSS background-size: cover + background-attachment: fixed clipping background images