CSS filter: blur(5px)未按预期生效原因咨询（不可调整DOM层级）

为什么filter: blur()不生效？ #

• filter: blur() 仅对元素自身及其内部的内容生效。你的#filter是个空div，没有任何可模糊的内容，所以看不到效果。
• 添加background-color: red后，这个div通过绝对定位铺满了整个视口，因此全屏显示红色。

解决方案（保持DOM层级不变） #

要模糊上方的文本，需要使用backdrop-filter属性——它专门用来模糊元素后方的页面内容（也就是视觉上在这个div下面的p文本）。

修改后的CSS代码：

#filter {
  backdrop-filter: blur(5px); /* 替换原filter属性 */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* 可选：加半透明背景增强模糊视觉效果 */
  background-color: rgba(255, 255, 255, 0.2);
}

说明：

• backdrop-filter: blur(5px) 会模糊该div覆盖区域后方的所有内容，正好对应你要模糊的上方p文本。
• 半透明背景是可选的，不加的话模糊效果也能生效，但加上后视觉上会更明显。

内容的提问来源于stack exchange，提问作者four-eyes