CSS filter: blur() 只作用于目标元素自身及其内部内容（子元素），无法影响其兄弟或父级元素中的内容；将 blur 应用于空 <div> 无法模糊同级 <p>，必须将需模糊的内容包裹在被滤镜作用的容器内。

css `filter: blur()` 只作用于目标元素自身及其**内部内容**（子元素），无法影响其兄弟或父级元素中的内容；将 blur 应用于空 `

` 无法模糊同级 `

`，必须将需模糊的内容包裹在被滤镜作用的容器内。

filter 属性是一个自包含式效果：它仅对应用该样式的元素及其后代元素进行渲染处理（如高斯模糊、亮度调整等），而不会穿透到 DOM 树中其他位置的兄弟节点。在原始代码中：

<div>
  <p>...文本内容...</p>
  <div id="filter" /> <!-- 空元素，无子内容 -->
</div>

尽管 #filter 设置了 filter: blur(5px)，但它内部没有任何内容（包括 <p>），因此模糊效果“无物可模”，自然不可见。同时因 position: absolute; top: 0; left: 0; width: 100%; height: 100%，该空 div 覆盖了整个区域，background-color: red 才会铺满全屏——这正印证了它占据空间但不承载内容。

✅ 正确做法是：将需要模糊的内容作为 #filter 的子元素，即重构 DOM 结构：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div id="filter">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
  </p>
</div>

配合原有 CSS 即可生效：

立即学习“前端免费学习笔记（深入）”；

#filter {
  filter: blur(5px);
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

⚠️ 注意事项：

• filter 不具备“穿透性”，切勿试图用它模糊兄弟元素；
• 若需模糊背景区域（而非内容本身），应使用 backdrop-filter（注意浏览器兼容性，并确保父容器有透明区域）；
• 模糊会显著影响渲染性能，尤其在动画中慎用高值（如 blur(20px)）或频繁重绘场景；
• 在移动端或低性能设备上，建议搭配 will-change: filter 或启用硬件加速（如添加 transform: translateZ(0)）以优化表现。

总结：filter 是“容器内滤镜”，不是“全局覆盖滤镜”。理解其作用域边界，是精准控制视觉效果的前提。