CSS实现高斯模糊效果

高斯模糊效果"/>

CSS实现高斯模糊效果

用CSS实现高斯模糊效果：filter、backdrop-filter
高斯模糊是一种常见的效果（俗称毛玻璃效果），在CSS中使用filter、backdrop-filter属性均可实现
一、filter
这其实是一种“假”模糊，需要一层做背景并使用filter属性达到模糊效果，另一层（在背景层之上）设置一个半透明的背景色。如下：
问题：1. blur值越大，模糊周边白边就越明显，去除白边：
1.背景图background设置background-position，放大背景图进行裁切
2.img标签的src图片可以使用margin和padding结合overflow:hidden进行box的裁切，
问题：2. 使用blur同时使用scroll的话，导致去除白边效果失效
不同时使用

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