css 毛玻璃 阮一峰

毛玻璃效果是一种可以使网页元素模糊化的CSS技术。这种效果常常被运用在背景图片、遮罩层、文本框等元素之上，使其看起来更加柔和，让页面的整体视觉效果更具有艺术性。下面我们来看一下如何用CSS来实现毛玻璃效果。

.element {
  /* 使用CSS高斯模糊滤镜来模糊化元素 */
  filter: blur(5px);
  /* 使用CSS布局技术来实现毛玻璃效果 */
  background: url("image.png") no-repeat center/cover;
  position: relative;
  z-index: 1;
}

.element:before {
  /* 给元素添加一个伪元素 */
  content: "";
  /* 背景颜色使用rgba来设置透明度 */
  background-color: rgba(255,255,.5);
  /* 元素的位置和大小要和父元素一致 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* 给元素添加高斯模糊滤镜来实现毛玻璃效果 */
  filter: blur(10px);
}

以上代码中，我们首先在需要添加毛玻璃效果的元素上使用CSS高斯模糊滤镜来模糊化元素。接着，我们利用CSS布局技术给元素添加一个伪元素，在其上面设置背景颜色和高斯模糊滤镜，从而实现毛玻璃效果。

需要注意的是，在设置伪元素的样式时要让其位置和大小与父元素一致，这样才能让毛玻璃效果覆盖在元素之上。同时，要使用rgba来设置透明度，这样背景颜色才能显示出来。

当然，以上代码只是实现毛玻璃效果的一种方法，有兴趣的读者可以根据具体需要来做一些微调。总之，CSS毛玻璃效果是一种很酷炫的技术，如果你喜欢设计和美化网页，那么不妨尝试一下吧。