如何实现图片上方文字叠加且无背景色渗透问题

摘要 #

如何在CSS中避免图片上方的文字出现背景色显示问题。

背景信息 #

使用「相对容器+绝对子元素」的布局可以实现图片上方叠加文字，正常情况下该方案运行正常：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

</body>
</html> 

正常效果展示：

但当使用*选择器设置全局背景色后，绝对定位的文字元素会出现背景色渗透问题：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
   background-color: black;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

</body>
</html> 

问题效果展示：

问题描述 #

如何实现图片上方文字叠加，同时避免这种背景色渗透问题？目标是让绝对定位的文字元素无背景色或背景色透明（直接设置absolute元素的background-color: transparent无效）。已知绝对定位元素与行内元素的处理方式不同，但不清楚具体解决方法；现有方案仅适用于给绝对元素设置特定背景色，而需求是无背景色，仅显示图片上方的文字。

解决方案 #

问题根源在于*选择器会对所有元素应用背景色，包括承载文字的绝对定位div容器——图片作为替换元素，自身内容会覆盖背景，而文字容器的背景则会直接显示在文字下方。可以通过以下两种方法解决：

方法一：修改全局背景的设置范围 #

不要使用*选择器设置全局背景，而是给body标签设置背景色。背景属性默认不会继承，因此绝对定位的文字容器会保持透明：

body {
  background-color: black;
}

方法二：显式重置文字容器的背景色 #

如果必须使用*选择器，可通过类选择器显式覆盖文字容器的背景为透明（类选择器优先级高于通配符*）：

.bottom-left, .top-left, .top-right, .bottom-right, .centered {
  background-color: transparent;
}

两种方法都能让文字直接叠加在图片上，不会出现背景色渗透的问题。

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