css图片中怎么加文字 |css clip

/*方法一：在CSS样式中添加背景图片并使用text-indent设置文字位置*/
.example1 {
background: url(images/example.jpg) no-repeat;
text-indent: -9999px; /* 将文字向左或向上移动，隐藏在视觉范围之外 */
width: 100px;
height: 50px;
}
/* 在HTML代码中添加需要显示的文字 */
<div class="example1">文字内容</div>
/*方法二：使用伪类在图片上添加内容*/
.example2 {
position: relative; /* 将图片定位 */
width: 100px;
height: 50px;
}
.example2::after {
content: "文字内容"; /* 内容在CSS中使用伪类添加 */
display: block;
position: absolute;
top: 50%; /* 字体向下移动一半，使其在图片正中间 */
left: 50%;
transform: translate(-50%, -50%); /* 将文字垂直和水平都置于图片正中间 */
}
/* 在HTML代码中添加具体的图片 */
<div class="example2">
<img src="images/example.jpg" alt="图片示例">
</div>

以上就是如何在CSS图片上加入文字的两种方法，大家可以根据实际需要来选择使用哪种方法。如果有其他的好的方法，也欢迎大家分享。