CSS设置高斯模糊效果

高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像,其视觉效果就像是经过一个毛玻璃在观察图像。
实现效果 【CSS设置高斯模糊效果】CSS设置高斯模糊效果
文章图片

上方的文字好像放在了一个毛玻璃下面,一种若隐若现的感觉。
代码
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?

body { background-color: bisque; } .header { height: 80px; position: sticky; box-shadow: 0 1px 4px 0 rgba(0,0,0,.16); top: 0; backdrop-filter: blur(4px); }

最重要的代码就是backdrop-filter: blur(4px),你可以把4px增大,就会表现出更加模糊的效果。
CodePen-毛玻璃效果预览
文章首发于我的博客 IICOOM-个人博客 《CSS设置高斯模糊效果》

    推荐阅读