如何实现带透明背景的文本在背景图或其他文本上叠加显示？

不管是把文本叠加在另一段文本上，还是背景图片上，核心都是用CSS的定位和透明背景属性来实现，以下是具体方案：

一、文本叠加在另一段文本上 #

实现思路 #

• 给父容器设置position: relative，作为上层文本的定位基准
• 上层文本使用position: absolute脱离文档流，通过top/left等属性控制位置
• 用rgba()设置背景色的透明度（不会影响文本本身），避免用opacity（会让整个元素包括文本变透明）

代码示例 #

<div class="text-container">
  <p class="bottom-text">这是底层的文本内容，用来作为被叠加的基础内容，长度可以任意调整。</p>
  <p class="top-text">这是带透明背景的叠加文本</p>
</div>

.text-container {
  position: relative;
  width: 400px;
  padding: 20px;
}

.bottom-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.top-text {
  position: absolute;
  top: 30px;
  left: 50px;
  padding: 8px 16px;
  font-size: 14px;
  color: #000;
  /* 白色背景，70%透明度 */
  background-color: rgba(255, 255, 255, 0.7);
  /* 可选：添加圆角让样式更美观 */
  border-radius: 4px;
}

二、文本叠加在背景图片上 #

实现思路 #

和文本叠加文本逻辑一致，只是把底层文本换成图片，父容器可以直接用图片元素或者背景图：

代码示例（使用img标签） #

<div class="image-container">
  <img src="your-image-url.jpg" alt="背景图片" class="background-img">
  <p class="overlay-text">叠加在图片上的透明背景文本</p>
</div>

.image-container {
  position: relative;
  width: 500px;
  height: 300px;
  /* 裁剪图片避免溢出 */
  overflow: hidden;
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 10px 20px;
  color: #fff;
  /* 黑色背景，60%透明度 */
  background-color: rgba(0, 0, 0, 0.6);
  font-size: 18px;
}

注意事项 #

• 如果叠加层级出现问题，可以给上层文本设置z-index: 10（值大于底层元素即可）
• 调整rgba()的最后一个参数（0~1）可以控制背景透明度，0完全透明，1完全不透明
• 给上层文本添加适当的padding，避免文本和背景边缘过于拥挤，提升可读性

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