CSS 實作磨砂玻璃（毛玻璃）效果樣式
要實作磨砂玻璃背景，可以使用 CSS3 中的 ::before 偽元素和 backdrop-filter 屬性，結合 opacity 屬性和 blur() 函式來實作，
具體實作步驟如下：
- 創建一個具有背景的元素，例如一個
div元素，
div {
background-image: url("your-image-url");
}
- 使用
::before偽元素為元素添加一個半透明的背景層，
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
在這個示例中，設定了 ::before 偽元素的內容為空，位置為絕對定位，寬度和高度分別為 100%，并設定了一個半透明的白色背景色，
- 使用
backdrop-filter屬性對::before偽元素的背景進行模糊處理，
div::before {
/* ... */
backdrop-filter: blur(10px);
}
在這個示例中，使用 blur() 函式設定模糊程度為 10 像素，可以根據需要調整這個值來控制模糊程度，
- 為了讓磨砂玻璃效果更加明顯，可以通過
opacity屬性降低::before偽元素的不透明度，
div::before {
/* ... */
opacity: 0.8;
}
在這個示例中，將 ::before 偽元素的不透明度降低到 0.8，以增強磨砂玻璃效果，
完整的 CSS 代碼如下：
div {
background-image: url("your-image-url");
position: relative;
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
opacity: 0.8;
}
通過這種方式，可以使用 CSS 快速簡單地實作磨砂玻璃背景效果，需要注意的是，backdrop-filter 屬性并不是所有瀏覽器都支持，需要進行兼容性測驗和兼容性處理，
作者：飛仔FeiZai
出處：https://www.cnblogs.com/yuzhihui/p/17412568.html
宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552855.html
標籤：Html/Css
上一篇：JSP_5.16_課堂筆記
下一篇：返回列表