CSS背景图片着色异常：着色覆盖全屏幕，需仅作用于jumbotron

嗨，这个问题我之前也碰到过！核心原因是你的着色层没有被限制在.jumbotron的容器范围内，大概率是定位逻辑出了问题。

为什么会覆盖全屏？ #

当你用伪元素（比如::before/::after）或者额外的div实现背景着色时，如果.jumbotron没有设置position: relative（或者其他非static的定位方式，比如absolute/fixed），那么这个绝对定位的着色层会默认以整个文档（<html>标签）作为定位基准，自然就铺满了整个屏幕，把class2的区域也盖住了。

修正后的CSS示例 #

假设你之前的着色是用伪元素实现的，调整后的代码应该是这样：

.jumbotron {
  /* 保留你原有的背景图设置 */
  background-image: url('你的背景图地址');
  background-size: cover;
  background-position: center;
  
  /* 关键：添加相对定位，让内部绝对定位元素以它为参照 */
  position: relative;
  /* 给容器设置明确的高度，避免塌陷 */
  min-height: 400px;
  /* 如果容器内有文字/内容，确保它们在着色层上方 */
  z-index: 1;
}

/* 实现着色效果的伪元素 */
.jumbotron::before {
  content: '';
  /* 绝对定位，相对于.jumbotron的边界 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 这里设置你需要的着色颜色和透明度，比如半透明蓝色 */
  background-color: rgba(30, 144, 255, 0.4);
  /* 让着色层位于背景图上方、内容下方 */
  z-index: -1;
}

几个关键注意点 #

• position: relative是核心：这会把.jumbotron变成内部绝对定位元素的"定位上下文"，伪元素的尺寸和位置都会严格跟着.jumbotron走。
• 层级控制（z-index）：如果.jumbotron里有文字或其他内容，一定要确保内容在着色层的上方，避免被遮挡。上面的示例中给.jumbotron设z-index:1，伪元素设z-index:-1就能实现这个效果。
• 容器高度：如果.jumbotron内部没有足够的内容撑高度，记得给它设置min-height或者固定高度，否则容器会塌陷，着色层也会跟着没高度。

如果你的着色不是用伪元素实现的，而是额外加了一个div，那原理也是一样：给.jumbotron加position: relative，然后给那个着色div设置position: absolute，并把尺寸设为100%覆盖.jumbotron即可。

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