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

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

前端

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

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

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

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

我来解答赞 1 收藏

反馈

暂无解答