背景色、背景图与文本分层问题：文本出现蓝色背景如何解决？

我一眼就看出问题所在啦，核心是**z-index 可不是随便加了就生效的**，另外还有两个小细节拖了后腿，咱们一步步来解决：

为啥文本会透出蓝色背景？ #

你给 #some-text 加了 z-index: 3，但这个元素默认是 position: static（也就是没设置定位属性），z-index 对静态定位的元素完全无效！这时候文本和 body 处于同一层级，自然会显示 body 的蓝色背景——就算你设置 background: transparent 也没用，因为文本本身就没背景，你看到的就是父元素 body 的底色。

还有两个小bug要修正 #

1. HTML 里的闭合标签写错了：最后一行应该是 </body>，不是 <body>，这个小错误可能会导致页面渲染异常
2. #display 元素没设置宽高，默认是宽0高0，就算加了背景图也看不到

修正后的完整代码 #

CSS #

body { 
  background-color: blue; 
  margin: 0; /* 去掉默认边距，避免出现不必要的滚动条 */
} 
#some-text { 
  color: red; 
  z-index: 3; 
  position: relative; /* 关键！给文本加个相对定位，z-index才会生效 */
  padding: 1rem; /* 可选：给文本加点内边距，看着更舒服 */
} 
#display { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  background-image: url('./some-image.jpg'); 
  z-index: 2; 
  width: 300px; /* 给背景图容器设置宽高 */
  height: 300px;
  background-size: cover; /* 让背景图适配容器大小 */
}

HTML #

<body> 
  <div id="some-text">TEXT</div> 
  <div id="display"></div> 
</body>

现在的分层逻辑就对啦 #

调整后页面的层级从下到上是：

• body 蓝色背景（默认层级）
• #display 背景图（绝对定位 + z-index:2，在蓝色背景之上）
• #some-text 红色文本（相对定位 + z-index:3，在背景图之上）

这样就完美实现你想要的分层效果啦！

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