CSS 實現磨砂玻璃（毛玻璃）效果樣式

要實現磨砂玻璃背景，可以使用 CSS3 中的 ::before 偽元素和 backdrop-filter 屬性，結合 opacity 屬性和 blur() 函數來實現。

具體實現步驟如下：

1. 創建一個具有背景的元素，例如一個 div 元素。

div {
  background-image: url("your-image-url");
}

2. 使用 ::before 偽元素為元素添加一個半透明的背景層。

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

在這個示例中，設置了 ::before 偽元素的內容為空，位置為絕對定位，寬度和高度分別為 100%，並設置了一個半透明的白色背景色。

3. 使用 backdrop-filter 屬性對 ::before 偽元素的背景進行模糊處理。

div::before {
  /* ... */
  backdrop-filter: blur(10px);
}

在這個示例中，使用 blur() 函數設置模糊程度為 10 像素。可以根據需要調整這個值來控制模糊程度。

4. 為了讓磨砂玻璃效果更加明顯，可以通過 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

聲明：歡迎任何形式的轉載，但請務必註明出處！！！