失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > CSS设置高斯模糊效果

CSS设置高斯模糊效果

时间:2022-11-04 12:00:14

相关推荐

CSS设置高斯模糊效果

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

实现效果

上方的文字好像放在了一个毛玻璃下面,一种若隐若现的感觉。

代码

<div class="header"></div><h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?</h1><h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?</h1>

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设置高斯模糊效果》

如果觉得《CSS设置高斯模糊效果》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。