【css实现毛玻璃效果】

css实现毛玻璃效果

一个背景图上面需要有局部模块是磨砂样式的背景。（本是UI给图就可以完成，但是由于图片会由屏幕宽度有所变化，会导致磨砂的位置有变化，导致磨砂前面写的样式位置有所改变）

---

想要的效果

实现的效果如下图
需要磨砂效果的div上：

backdrop-filter: blur(15px)

如果背景色不想要白色要其他色

backdrop-filter: blur(15px);
background: rgba(248, 251, 251, .6);

这个属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）, 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

---