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

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); // 模糊滤镜
  }

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