前言

最近在參加一個(gè)項(xiàng)目的時(shí)候，需要實(shí)現(xiàn)毛玻璃的效果，一開(kāi)始想簡(jiǎn)單的使用背景透明度rgba或者filter:blur,來(lái)實(shí)現(xiàn)。
遇到問(wèn)題：
1.只使用透明度不能準(zhǔn)確的實(shí)現(xiàn)毛玻璃的效果。
2.如果單獨(dú)的使用filter：blur（…px），發(fā)現(xiàn)子元素全部模糊。
解決方法：
主要通過(guò)，蒙層（定位來(lái)實(shí)現(xiàn)）。
主要代碼如下：

//需要添加毛玻璃效果的div.headSty{height:0.6rem;width: 100%;padding:0 .1rem;display: flex;align-items: center;justify-content: center;z-index: 10;// 主要內(nèi)容區(qū)也要進(jìn)行定位,并用z-index讓它位于毛玻璃之上，如果不進(jìn)行定位，內(nèi)容區(qū)也會(huì)模糊position: relative;} //實(shí)現(xiàn)毛玻璃的div .frosted{position: absolute;left: 0;top: 0;width: 100%;height: 60px;background: rgba(255,255,255,.1);backdrop-filter: blur(4px); }// 相對(duì)于body進(jìn)行絕對(duì)定位 <div class="frosted"></div><div class="headSty"><div class="logoimg"></div><div class="left"><div class="otherNav"><div class="d3">登陸/注冊(cè)</div></div></div></div>

這樣，一個(gè)簡(jiǎn)單的毛玻璃效果就實(shí)現(xiàn)了。

總結(jié)

以上是生活随笔為你收集整理的css 实现毛玻璃效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。