CSS滤镜blur()为什么对子元素失效了？

冬冬（打工版）提问于 2026-03-03 13:03:21 阅读 78

前端

我在给一个容器加了 filter: blur(2px)，但发现里面的文字和图片都没模糊，只有背景色模糊了？是不是哪里写错了？

我试过把 filter 直接加到子元素上，结果整个布局都乱了……下面是我的代码：

<div class="container">
  <img src="test.jpg" alt="示例图" />
  <p>这段文字应该被模糊才对</p>
</div>

对应的 CSS 是 .container { filter: blur(2px); background: #eee; }，但实际效果只有背景灰蒙蒙的，内容完全清晰。这到底咋回事？

我来解答赞 7 收藏

反馈

1 条解答

设计师焕焕 Lv1

啊这个问题我遇到过，是CSS滤镜的一个常见坑。其实不是失效，而是blur滤镜的工作方式就是这样：它模糊的是元素的整个绘制层，包括背景色，但不影响子元素的独立绘制。

要解决这个问题，最简单的办法是给子元素单独加backdrop-filter。但更WordPress风格的解决方案是给容器加个伪元素：



.container {

    position: relative;

    background: transparent;

}

.container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: #eee;

    filter: blur(2px);

    z-index: -1;

}

这样处理之后，背景会模糊而内容保持清晰。如果连内容都要模糊，那就得用transform hack了：



.container {

    filter: blur(2px);

    transform: translateZ(0);

}

强制开启GPU加速能解决大部分滤镜失效问题，不过要注意性能影响。我在去年做的那个企业站就用了这招。

2026-03-05 05:03