css常用（2）：毛玻璃、模糊滤镜

CSS特效：毛玻璃与模糊滤镜的区别,

最新推荐文章于 2025-10-18 12:01:39 发布

原创最新推荐文章于 2025-10-18 12:01:39 发布 · 744 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

常用css 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了如何使用CSS实现毛玻璃效果，通过backdrop-filter属性对背景进行模糊处理，以及模糊滤镜(filter)如何使元素自身变得模糊，两者之间的差异在于模糊的应用对象不同。

1.毛玻璃

.dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px); //毛玻璃特效
  }

下面我们可以看看效果：

可以看见登录页后面的背景都加上了一层模糊，这就是毛玻璃效果。

2.模糊滤镜

接下来，我们来看看模糊滤镜，加入下列css属性：

  .dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    width: 100%;
    height: 100%;
    // backdrop-filter: blur(10px); //毛玻璃特效
    filter: blur(10px); // 模糊滤镜
  }

可以看见此时背景并没有变，而登录页发生了模糊变化，这就是两者的区别了，大家可以根据情况酌情使用哦。