css在图片上显示文字

CSS是一种强大的网页设计语言，它可以实现各种效果，其中一个常见的应用是在图片上显示文字。在这篇文章中，我们将介绍两种方法实现这一功能。

// 第一种方法：使用position属性img {
    position: relative;
/* 设置图片为相对定位 */}
p {
    position: absolute;
    /* 设置文字为绝对定位 */top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 将文字居中显示 */color: #fff;
/* 设置文字颜色 */}

第一种方法是使用position属性，将图片设置为相对定位，文字设置为绝对定位，通过top、left、transform属性将文字居中显示。这种方法适用于单个图片需要添加文字的情况。

// 第二种方法：使用背景图片p {
    background-image: url("image.jpg");
    /* 设置背景图片 */background-size: cover;
    /* 拉伸背景图片以适应容器 */color: #fff;
    /* 设置文字颜色 */font-size: 24px;
    /* 设置文字大小 */text-align: center;
    /* 居中显示文字 */line-height: 200px;
/* 文字行高等于容器高度 */}
    

第二种方法是通过设置背景图片，在文字上面添加文字内容的方法。这种方法适用于多张图片需要添加相同文字的情况。

以上是两种在图片上显示文字的方法，可以根据实际情况选择合适的方法。希望这篇文章能够对你有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！