css在图片上添加文字代码是什么

CSS样式表是Web前端开发中不可或缺的一部分。它可以为HTML文档添加各种类型的样式，包括字体大小、颜色、对齐方式和边框等。其中一项有趣的样式是将文字添加到图片上，让图片更加生动。

style>
.container{
    position: relative;
    text-align: center;
}
.container img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.container .text-block{
    position: absolute;
    bottom: 0;
    background-color: black;
    color: white;
    width: 100%;
    padding: 20px;
}
    /style>
    

以上的代码用CSS为图片添加了一段文字。首先，我们将容器设置为相对定位，这样，图片和文字块的位置可以相对于容器进行定位。接着，我们将图片水平居中对齐。最后，我们添加了一个 div 元素来容纳文字块，并将其定位在图片的底部。使用背景颜色和文本颜色的CSS属性，我们使一段文字在图片上很好地呈现。

通过CSS在图片上添加文字是一个简单的方法，通过增强图片的视觉效果吸引用户的注意力。这些代码让你轻松设置，可以根据需要自由调整样式和位置。

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