web端css实现高斯模糊：filter/backdrop-filter

最新推荐文章于 2025-02-18 13:38:33 发布

reffrselom

最新推荐文章于 2025-02-18 13:38:33 发布

阅读量2.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/reffrselom/article/details/103632247

版权

本文介绍了如何使用CSS的dropback-filter和filter属性在web端实现高斯模糊效果，以及它们的浏览器兼容性问题。dropback-filter可使元素及其背景模糊，但某些浏览器如搜狗、360极速、火狐不支持。filter属性适用于图片的高斯模糊，且支持更多调整效果，兼容性较好。同时提到了background-blend-mode混合模式在创建复杂效果上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户要求实现前端实现毛玻璃效果：即PS中的高斯模糊效果
翻了翻资料发现还真是能实现，甚至连正片叠底效果都能实现，效果叠加，不得不感慨css3的日益强大。

1. dropback-filter:

用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊

/* SVG 过滤器 */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 过滤器函数 */
backdrop-filter: blur(2px);    //模糊
backdrop-filter: brightness(60%);    //亮度
backdrop-filter: contrast(40%);    //对比度
backdrop-filter: drop-shadow(4px 4px 10px blue);    //图像后方阴影
backdrop-filter: