CSS使用filter、backdrop-filter实现高斯模糊效果

13,020 阅读1分钟

🍃 用CSS实现高斯模糊效果:filter、backdrop-filter

高斯模糊是一种常见的效果(俗称毛玻璃效果),在CSS中使用filter、backdrop-filter属性均可实现

一、filter

这其实是一种“假”模糊,需要一层做背景并使用filter属性达到模糊效果,另一层(在背景层之上)设置一个半透明的背景色。如下:

问题:1. blur值越大,模糊周边白边就越明显,去除白边:

  • 背景图background设置background-position,放大背景图进行裁切

  • img标签的src图片可以使用margin和padding结合overflow:hidden进行box的裁切,

问题:2. 使用blur同时使用scroll的话,导致去除白边效果失效

  • 不同时使用

image.png

二、backdrop-filter

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

image.png

image.png