美文网首页
用CSS实现高斯模糊效果:filter、backdrop-fil

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

作者: 明灭_ | 来源:发表于2018-11-12 21:43 被阅读0次

高斯模糊是一种常见的效果(俗称毛玻璃效果),在CSS中使用filter、backdrop属性均可实现。
一、filter
这其实是一种“假”模糊,需要一层做背景并使用filter属性达到模糊效果,另一层(在背景层之上)设置一个半透明的背景色。如下:

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

相关文章

网友评论

      本文标题:用CSS实现高斯模糊效果:filter、backdrop-fil

      本文链接:https://www.haomeiwen.com/subject/dmlhfqtx.html