純CSS實現底層毛玻璃效果（程式碼範例）
- 不言轉載
- 2018-11-27 16:27:023648瀏覽
這篇文章帶給大家的內容是關於純CSS實現底層毛玻璃效果（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
毛玻璃背景是一個很常見的網頁樣式，想要實現，其實並不難，但經過我在網上的搜索發現，大量實現方法都較為不規範，且把問題複雜化了（例如各種z-index屬性與position的定位）
現提供一個程式碼很直白且實作效果良好的實作方案，改良自W3Schools
HTML部分
<!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8"> <title>FrostedGlass</title> <link rel="stylesheet" href="frostedGlass.css"> </head> <body> <div> <div> <p>this is FrostedGlass</p> </div> </div> </body> </html>
.mainHolder是主框體
.textHolder是毛玻璃區域
.p是浮於毛玻璃上的文字內容
CSS部分
* {
box-sizing: border-box;
}
.mainHolder {
width: 600px;
height: 600px;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.textHolder {
width: 100%;
height: 200px;
position: absolute;
right: 0;
bottom: 0;
background: inherit;
overflow: hidden;
}
.textHolder::before {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
background-attachment: fixed;
filter: blur(4px);
}
.textHolder::after {
content: "";
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.25);
}
p {
z-index: 1;
color: white;
position: relative;
margin: 0;
}
解決毛玻璃效果裡最核心的問題：模糊效果不能影響字體，採用了偽元素::after於::before
值得注意的是，在p標籤裡的position屬性。設定為relative後，會將p從被遮蔽狀態「提起來」。
另外，對於不同的瀏覽器內核，filter的寫法會有些許不同。
以上是純CSS實現底層毛玻璃效果（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除