如何使用 CSS 实现毛玻璃效果？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

`backdrop-filter` 属性详解

backdrop-filter 属性允许你对元素背后的内容应用滤镜效果。这与 filter 属性不同，filter 属性作用于元素本身的内容。 backdrop-filter 主要用于实现诸如模糊、饱和度调整、亮度调整等视觉效果，从而营造出毛玻璃或磨砂玻璃的效果。

语法

backdrop-filter: none | <filter-function-list>;

none: 不应用任何效果。
<filter-function-list>: 一个或多个滤镜函数，例如 blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()。

常见的滤镜函数

blur(radius): 应用高斯模糊效果，radius 定义模糊的半径，单位通常是像素（px）。值越大，模糊效果越明显。
brightness(amount): 调整亮度，amount 可以是数字或百分比，1 表示原始亮度，小于1则变暗，大于1则变亮。
contrast(amount): 调整对比度。
grayscale(amount): 转换为灰度图像。
opacity(amount): 调整透明度。

实现毛玻璃效果的步骤

HTML 结构： 你需要一个作为毛玻璃的元素，并且需要将其放置在其他元素之上。可以使用绝对定位或者固定定位，保证该元素可以覆盖其他元素。
```
<div class="background">
    <p>这是背景内容</p>
</div>
<div class="frosted-glass">
    <p>这是毛玻璃效果层</p>
</div>
```

CSS 样式：

// www.javascriptcn.com code example
.background {
  position: relative; /* 或者其他有定位的 */
  height: 300px;
  background-image: url('your-background-image.jpg');
  background-size: cover;
  padding: 20px;
  color: white;
}

.frosted-glass {
  position: absolute; /* 使用绝对定位覆盖 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3); /* 添加半透明背景 */
  z-index: 1; /* 确保在背景之上 */
  display:flex;
  justify-content:center;
  align-items:center;
  color:black;
}

position: absolute 或 position: fixed: 这使得毛玻璃层能够覆盖在背景元素之上。
backdrop-filter: blur(10px): 设置模糊效果，根据需要调整半径。
background-color: rgba(255, 255, 255, 0.3): （可选）添加半透明的背景颜色，增强毛玻璃的视觉效果。
z-index: 确保毛玻璃层在背景层之上。

兼容性

backdrop-filter 属性的兼容性相对较新，较旧的浏览器可能不支持。需要注意：

现代浏览器支持： Chrome, Firefox, Safari, Edge 等现代浏览器都支持。
iOS/Android: 大部分手机浏览器支持。
旧版本浏览器： IE 浏览器不支持。

因此，在生产环境中使用该属性时，需要注意兼容性问题，可以考虑使用 filter 属性或其他方法实现降级方案。例如，可以配合 @supports 来针对支持的浏览器使用 backdrop-filter, 而对于不支持的浏览器，则仅应用背景色来达到一定的透明度效果。

如何使用 CSS 实现毛玻璃效果？

推荐答案

本题详细解读

backdrop-filter 属性详解

语法

常见的滤镜函数

实现毛玻璃效果的步骤

兼容性

`backdrop-filter` 属性详解