CSS如何實現毛玻璃效果
theme: fancy
本文正在參加「金石計劃 . 瓜分6萬現金大獎」
CSS 如何實現毛玻璃效果
寫在前面
之前在逛一些網站的時候，就經常看見一些圖片背景模糊的效果，這樣的效果可以使得用户將更多的注意力放在清晰的地方上，可以不經意間引導用户。
我就很好奇，這樣的一種效果是怎麼實現的。恰好這幾天週末，順便彌補一下我拙劣的css知識。
通過查找一些資料，我發現這樣的效果大致可以使用兩種方法來實現：
- 傳統的filter
- css3新特性：backdrop-filter
下面我就主要講述這兩種方法的實現。
傳統的filter
首先就講一下比較老一點的方法，filter（過濾）,聽這名字，就知道里面可以實現功能不僅僅是實現毛玻璃這樣的效果。
css
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
可以看到這個屬性裏面有很多的功能，其中就包括了模糊的功能，blur()，這個屬性可以實現模糊的效果，但是這個屬性是不支持IE的，所以如果你的項目需要兼容IE的話，那麼這個方法就不適合你了。（但是還好IE已經停止更新了）
css
filter: blur(10px);
那就用一個例子來説明一下這個功能吧。
```html
``` 為了方便，我們只使用一個div盒子
css代碼如下：
css
.test {
width: 400px;
height: 200px;
filter: blur(2px);
background: url(background.png) no-repeat;
}
這個圖片地址是我本機的圖片地址，所以你們可能看不到效果，但是你們可以自己找一張圖片，然後把地址改成你們的圖片地址就可以了。
效果如下：
為了對比更加明顯，加一個沒有模糊效果的圖片：
但是使用這個方法的話，就會有一個問題，就是如果你的圖片是一個動態的圖片，那麼這個模糊的效果就會跟着動態的圖片一起動，這樣的效果就不是我們想要的了。並且這個方法的模糊效果會影響到子元素，比如我在圖片中間放一個盒子（子元素），那麼盒子裏面的內容也會被模糊掉。
就像這樣
我在子盒子裏面放了1-6的數字，但是數字被模糊掉了，這樣的效果就不是我們想要的了。
所以就有了第二種方法實現：
css3新特性：backdrop-filter
這個屬性是css3的新特性，所以兼容性不是很好，但是現在的瀏覽器都已經支持了，所以這個方法還是可以使用的。
css
backdrop-filter: none|filter|initial|inherit;
可以看到這裏有四個屬性，其中filter就是我們需要的屬性，
當然在filter屬性裏面也有很多的功能，我們只需要用到模糊的功能就可以了，blur()。
html
<div class="test">
<div class="child">123456</div>
</div>
然後接下里，就是css代碼：
css
.test {
width: 1200px;
height: 800px;
background: url(background.png) no-repeat;
}
.child {
width: 600px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -60px;
top: 50%;
margin-top: -100px;
background-color: rgba(255, 255, 255, .7);
backdrop-filter: blur(10px);
}
首先放一張沒有模糊效果的圖片：
接下來就是效果圖：
可以很明顯得看到，這次我們模糊的知識盒子的背景，並有模糊掉盒子本身的內容，這就是backdrop-filter的優勢所在。
總結
這兩種方法都可以實現模糊效果，但是第二種方法的兼容性不是很好，所以如果你的項目需要兼容性比較好的話，那麼就使用第一種方法，如果你的項目不需要兼容性的話，那麼就使用第二種方法。
還有就是第一種毛玻璃效果會影響後面子元素，導致後面子元素也會被模糊掉。所以如果你的項目中有子元素並且不願意被模糊的話，那麼就建議使用第二種方法。