CSS3 有 filter 濾鏡屬性，能給內(nèi)容，尤其是圖片，添加各種濾鏡效果。
filter 濾鏡詳見博文：CSS3中強(qiáng)大的filter(濾鏡)屬性_css3濾鏡_stones4zd的博客-CSDN博客
后續(xù)，CSS3 又新增了 backdrop-filter 背景濾鏡。
backdrop-filter 的屬性值跟 filter 完全一樣，只是應(yīng)用效果的標(biāo)簽不同。
- filter：作用于標(biāo)簽本身。
- backdrop-filter：作用于被標(biāo)簽遮蓋的內(nèi)容。往往需要結(jié)合定位 position 屬性實(shí)現(xiàn)遮蓋效果。
以模糊效果為例。
有如下 HTML 解構(gòu)：
<div class="box">
<div class="small bf1">
模糊
</div>
<img src="images/myimg.jpg" alt="">
</div>
CSS：讓 small 絕對(duì)定位，覆蓋圖片。
.box{
width: 600px;
height: 399px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
position: relative;
}
.small{
position: absolute;
width: 300px;
height: 200px;
left:50%;
top:50%;
margin-left: -155px;
margin-top: -105px;
border:5px #fff solid;
}添加 backdrop-filter 的模糊濾鏡：
.bf1{
backdrop-filter: blur(10px);
}效果如下。div.small 覆蓋的圖片部分就被模糊了。?
需要說明的是，只要被 div.small 覆蓋的內(nèi)容都會(huì)應(yīng)用濾鏡，而不在乎被覆蓋的內(nèi)容有多少。如，覆蓋兩張圖片的效果。文章來源：http://www.zghlxwxcb.cn/news/detail-702616.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-702616.html
到了這里，關(guān)于CSS3技巧36：backdrop-filter 背景濾鏡的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
