這篇文章主要介紹了如何使用css實(shí)現(xiàn)毛玻璃效果，具有一定借鑒價(jià)值，需要的朋友可以參考下。下面就和我一起來看看吧。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),金灣網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:金灣等地區(qū)。金灣做網(wǎng)站價(jià)格咨詢:18980820575

其實(shí)毛玻璃的模糊效果技術(shù)上比較簡(jiǎn)單，只是用到了 css 濾鏡（filter）中的 blur 屬性。但是要做一個(gè)好的毛玻璃效果，需要注意很多細(xì)節(jié)。

比如我們需要將上圖中頁面中間的文字區(qū)域變成毛玻璃效果，首先想到的是給其設(shè)置一個(gè)透明度，并添加模糊濾鏡：

.content {
    background-color: rgba(0,0,0,0.3);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);    
}

可是生成的效果卻是下面這樣：

從這個(gè)失敗的例子我們得到兩個(gè)結(jié)論：

1. 對(duì)元素直接使用模糊會(huì)將其內(nèi)容全部模糊掉，為了保證文字不會(huì)模糊掉需要多一個(gè)層單獨(dú)應(yīng)用模糊效果。

2. 模糊效果并不會(huì)應(yīng)用到其背后的元素上，所以需要使用 content 區(qū)域有和背景相同的背景圖并進(jìn)行模糊。

先解決第一個(gè)問題：

多一個(gè)層級(jí)的方法不通過添加元素，而通過偽元素。

.content {
    z-index: 1;
}
.content:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8);
    z-index: -1;
}

這里有兩點(diǎn)需要注意，由于偽元素不能通過 width:100% 和 height:100% 來繼承宿主元素的尺寸，所以通過上述方式來繼承 content 的尺寸；為了使偽元素位于 content 的下面這里給其設(shè)置 z-index:-1，為不使其隱藏到背景圖的后面，這里給 content 設(shè)置 z-index:1。

效果：

接下來給 content::after 設(shè)置相同的背景圖。

如上圖，即使我們?cè)O(shè)置了相同的 background-postion 與 background-size，中間部分的圖和大背景還是沒有拼接成功。

解決這個(gè)問題的方法很簡(jiǎn)單，只需要添加 background-attachment: fixed 屬性，之后為其進(jìn)行模糊處理。

.content {
    background-position: center top;
    background-size: cover;
}
.content::after {
    background-image: url(xxx.jpg);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
}

可以看到基本得到了我們想要的效果，美中不足的是在元素的邊緣模糊的效果減弱了。為了解決這個(gè)問題，我們將偽元素的范圍擴(kuò)大一些，同時(shí)為了效果不超出 content 的范圍，給其設(shè)置 overflow:hidden 屬性。

.content {
　　overflow: hidden;
}
.content::after {
　　margin: -30px;
}

這樣一個(gè)比較完美的毛玻璃效果就完成了，無論你如何改變?yōu)g覽器窗口的尺寸，content 部分的背景圖都能很好的與背景拼接，這都?xì)w功于 background-attachment 屬性。

demo 和 源碼地址：

https://darylxyx.github.io/Demo/blur/

https://github.com/Darylxyx/css-collection/tree/master/blur

以上就是如何使用css實(shí)現(xiàn)毛玻璃效果的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，行業(yè)資訊！

分享文章：如何使用css實(shí)現(xiàn)毛玻璃效果-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://weahome.cn/article/jjoos.html