css在图片内添加文字

CSS是前端开发中常用的样式语言，常常用于美化网页，让网页更加整洁美观。CSS还能够实现图片内添加文字的效果，下面我们一起来学习CSS添加图片文字的方法。

/*添加图片文字样式*/.add-text {
    position: relative;
}
/*添加文字样式*/.add-text p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    font-weight: bold;
}
    

首先，为了能够在图片上添加文字，我们需要先将图片和文字包裹在一个DIV中，代码如下：

div class="add-text">
    img src="your-image-url.jpg" alt="Your Image">
    p>
    Your Text/p>
    /div>

然后，我们为这个DIV设置相对定位，让后续的绝对定位生效，代码如下：

.add-text {
    position: relative;
}

接着，我们为文字设置绝对定位，并且让文字垂直和水平居中显示，代码如下：

.add-text p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    font-weight: bold;
}
    

这段代码中，我们使用了top和left属性来将文字垂直和水平居中，使用了transform属性来让文字水平和垂直居中，以便在不同大小的图片上都能够居中显示。此外，我们还给文字设置了白色颜色、20像素大小和加粗效果。

最后，将上述代码添加到你的CSS文件中，便可实现在图片内添加文字的效果。

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