设置模糊背景图片遇异常：div无效果，移除闭合标签后整个body被模糊

你的问题出在两个核心点：

• 空的.fondoIndex div没有设置尺寸，默认高度为0，背景图自然无法显示
• 未闭合div标签时，浏览器会自动补全DOM结构，导致这个div包裹了body内所有内容，filter:blur()会作用于所有子元素，所以整个页面都被模糊了

修正后的代码 #

HTML

<body>        
  <div class="fondoIndex"></div>
  <!-- 这里可以放置你的页面内容，比如文字、按钮、卡片等 -->
</body>

CSS

.fondoIndex {
  position: fixed; /* 固定在视口，滚动页面时背景保持全屏 */
  top: 0;
  left: 0;
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  background-image: url("images/bg3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
  z-index: -1; /* 将背景层置于所有内容下方，避免遮挡页面元素 */
}

/* 可选：消除body默认margin，避免出现不必要的滚动条 */
body {
  margin: 0;
}

关键修改说明 #

1. 设置全屏尺寸：通过position:fixed+top/left:0+width/height:100vw/100vh，强制背景div占满整个浏览器视口，确保背景图能正常显示
2. 隔离模糊效果：z-index:-1把背景层放到页面内容的下方，让filter:blur()只作用于背景本身，不会影响页面其他元素
3. 路径检查：确认images/bg3.png的路径正确性——如果是外部CSS文件，路径相对于CSS文件所在位置；如果是内嵌样式，路径相对于HTML文件所在位置

内容的提问来源于stack exchange，提问作者synth9