css简单实现毛玻璃效果

有些时候设计师会让我们实现毛玻璃的效果，来达到遮罩或者视觉上的美化。比如这样：

一：在毛玻璃的实现过程中backdrop-filter:blur()就显得尤为重要了

image.png

.div{
  width: 600px;
  height: 300px;
  background: #ffffff5e; //切记：背景色增加一定的透明度
  backdrop-filter: blur(15px);
}

二：背景虚化属性filter:blur()

image.png

以上代码增加filter以后：

.div{
  width: 600px;
  height: 300px;
  background: #ffffff5e; //切记：背景色增加一定的透明度
  backdrop-filter: blur(15px);
  filter:blur(2px)
}