实现等比例背景图遇问题：滚动失效、其他Div被遮挡，求优化方案

嘿，我来帮你搞定这个问题！你遇到的滚动失效和元素遮挡问题，其实是fixed定位背景层的两个常见坑，咱们一步步拆解解决：

问题根源分析 #

你原来的代码里，position:fixed的背景层会脱离文档流，默认情况下：

• 它的层级（z-index）会比普通文档流元素高，导致其他Div被遮挡；
• 它会覆盖整个视口，拦截所有鼠标事件（包括滚动、点击），所以滚动功能失效。

方案一：修复原有代码（最快） #

只需要给你的.background类添加两个关键属性，就能解决问题：

.background {
  background-image:url(xx);
  background-position:50% 50%;
  background-size:cover;
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index: -1; /* 把背景放到所有内容下方 */
  pointer-events: none; /* 让背景不拦截鼠标事件，滚动/点击能穿透到内容 */
}

方案二：用伪元素实现（更优雅） #

如果不想额外加一个DOM元素，推荐用伪元素来做背景，结构更干净：

/* 给父容器（比如body）设置相对定位，让伪元素基于它定位 */
body {
  margin: 0;
  min-height: 100vh; /* 确保至少占满视口高度 */
  position: relative;
}

/* 用::before伪元素生成背景层 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(xx);
  background-position: center center;
  background-size: cover;
  z-index: -1; /* 层级低于内容 */
  pointer-events: none; /* 不拦截鼠标事件 */
}

/* 内容容器示例，确保正常显示 */
.content {
  padding: 2rem;
  /* 不需要额外设置z-index，默认层级高于-1 */
}

注意事项 #

• 如果你的内容元素手动设置了z-index，确保它的值大于-1（默认元素的z-index是auto，相当于0，完全没问题）；
• pointer-events: none在IE10及以下不支持，但现在主流浏览器都兼容，如果你需要兼容旧IE，可以考虑给内容容器设置更高的z-index，同时确保内容容器占满视口高度并允许滚动。

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