css在图片上写文字属性

CSS是一种用于网页样式设计的语言，可以为网页添加各种各样的样式。其中，在图片上写文字是使用CSS中的属性之一。下面我们来看一下如何使用CSS在图片上写文字：

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    padding: 10px;
     text-align: center;
    font-size: 16px;
}
img {
    position: relative;
}
    

首先，我们创建一个CSS类名为“image-caption”，用于控制图片上的文字样式。其中，我们使用了position属性将文字定位在图片的底部，并使用bottom:0和left:0属性确定文字的位置。我们还指定了背景颜色、字体颜色、内边距以及字体大小等样式。

接下来，我们使用img标签将图片添加到网页中。通过设置img标签的position属性为relative，使得图片具有相对定位的效果。然后，在img标签的后面添加一个p标签用于显示图片标题。

img src="example.png" alt="Example Image">
    p class="image-caption">
    这是一个图片示例/p>
    

最后，通过在CSS中为img标签和p标签分别添加样式，可以控制图片和文字的位置、大小、样式等。这样，在网页上添加图片并在图片上显示文字就完成了。

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