在HTML中，我们可以使用<img>标签来插入图片，但是这个标签本身并不支持直接在图片上添加文字，为了实现这个功能，我们需要使用CSS来实现，下面我将详细介绍如何在HTML中让图片上加字。
1. 使用CSS的position属性
我们需要将图片和文字放在同一个元素中，例如一个<div>元素，我们可以使用CSS的position属性来控制图片和文字的位置。
<div class="image-with-text">
<img src="your_image.jpg" alt="Your Image">
<p class="text">Your Text</p>
</div>
接下来，我们在CSS中设置图片和文字的位置：
.image-with-text {
position: relative;
}
.image-with-text img {
position: absolute;
top: 0;
left: 0;
}
.image-with-text p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
在这个例子中，我们使用了position: relative;来使得<div>元素成为定位上下文，我们将图片设置为绝对定位，并使用top: 0;和left: 0;将其放置在容器的左上角，我们将文字也设置为绝对定位，并使用top: 50%;和left: 50%;以及transform: translate(-50%, -50%);将其放置在容器的中心。
2. 使用CSS的：:before和：:after伪元素
另一种在图片上添加文字的方法是使用CSS的::before和::after伪元素，这种方法的优点是可以更灵活地控制文字的位置和样式。
<div class="image-with-text">
<img src="your_image.jpg" alt="Your Image">
<p class="text">Your Text</p>
</div>
接下来，我们在CSS中设置伪元素：
.image-with-text {
position: relative;
overflow: hidden; /* This is to hide the pseudo element */
}
.image-with-text::before, .image-with-text::after {
content: ""; /* This is to create the pseudo elements */
position: absolute;
}
.image-with-text::before {
top: 0;
left: 0;
}
.image-with-text::after {
bottom: 0;
right: 0;
}
.image-with-text p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
在这个例子中，我们首先将图片和文字放在同一个元素中，我们使用position: relative;和overflow: hidden;来创建一个新的层叠上下文，并隐藏超出容器的内容，接着，我们使用::before和::after伪元素来创建两个新的层叠上下文，并使用content: "";来创建一个内容为空的元素，我们将这两个伪元素设置为绝对定位，并将它们放置在容器的四个角，这样，我们就可以在这两个伪元素上添加文字了。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/376404.html
微信扫一扫 