CSS实现背景模糊效果（高斯模糊）

最新推荐文章于 2025-11-15 18:01:24 发布

转载最新推荐文章于 2025-11-15 18:01:24 发布 · 1.1w 阅读

web前端专栏收录该内容

3 篇文章

订阅专栏

了解如何使用CSS的blur属性为网页元素添加模糊效果，通过调整px值来改变模糊程度，适用于不同场景的视觉优化。

px值越大，越模糊，可以按照不同的类名给不同的模糊值，背景看起来会更好看一点
重点实现为：
-webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);

转自：https://www.zhangxinxu.com/study/201311/css-filter-image-blur.html