css怎么设置文字在图片上面显示

CSS怎么设置文字在图片上面？

在网页设计中，我们经常需要将文字和图片结合在一起，以展示更多的信息，我们希望文字显示在图片的上方，而不是下方，如何使用CSS来实现这个效果呢？本文将详细介绍如何使用CSS设置文字在图片上面。

使用绝对定位

1、我们需要创建一个包含图片和文字的HTML结构：

<div class="image-text">
  <img src="your-image-source" alt="your-image-description" />
  <p>Your text here</p>
</div>

2、在CSS中，为包含图片和文字的div元素设置样式：

.image-text {
  position: relative; /* 设置相对定位 */
}
.image-text img {
  position: absolute; /* 设置绝对定位 */
  top: 0; /* 图片顶部与容器顶部对齐 */
  left: 0; /* 图片左侧与容器左侧对齐 */
}
.image-text p {
  position: relative; /* 设置相对定位 */
  z-index: 2; /* 设置文字的层叠顺序 */
}

使用z-index属性

1、在HTML中，为包含图片和文字的div元素设置样式：

<div class="image-text">
  <img src="your-image-source" alt="your-image-description" />
  <p>Your text here</p>
</div>

2、在CSS中，为包含图片和文字的div元素设置样式：

.image-text {
  position: relative; /* 设置相对定位 */
}
.image-text img {
  position: absolute; /* 设置绝对定位 */
  top: 0; /* 图片顶部与容器顶部对齐 */
  left: 0; /* 图片左侧与容器左侧对齐 */
}
.image-text p {
  position: relative; /* 设置相对定位 */
}

在这个例子中，我们没有使用z-index属性，但是由于我们将图片设置为绝对定位，所以它会覆盖在文字上，如果你想要让文字显示在图片上方，你可以为文字添加一个较高的z-index值，

.image-text p {
  position: relative; /* 设置相对定位 */
  z-index: 3; /* 设置文字的层叠顺序 */
}

使用伪元素和transform属性(推荐)

1、在HTML中，为包含图片和文字的div元素设置样式：

<div class="image-text">
  <img src="your-image-source" alt="your-image-description" />
  <p>Your text here</p>
</div>

2、在CSS中，为包含图片和文字的div元素设置样式：

.image-text::before { /* 使用伪元素在图片上添加一层遮罩 */
  content: ""; /* 防止内容被替换 */
  position: absolute; /* 设置绝对定位 */
  top: 0; /* 遮罩顶部与容器顶部对齐 */
  left: 0; /* 遮罩左侧与容器左侧对齐 */
  width: 100%; /* 遮罩宽度与容器宽度相同 */
  height: 100%; /* 遮罩高度与容器高度相同 */
  background-color: rgba(255, 255, 255, 0.8); /* 设置遮罩颜色和透明度 */
}