css在图片上加文字说明

CSS在图片上加文字说明是一种常见的美化图片的方式，可以使图片更加生动、有趣，同时也方便了网站的用户了解图片的内容和背景。

下面是一段示例代码，通过CSS实现在图片上添加文字的效果：

img {
    position: relative;
    display: inline-block;
}
img::after {
    content: "我是图片上的文字说明";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
}
    

首先，我们将标签设置为相对定位，为了让我们后面添加的文字作为该图片的子元素并按我们的要求定位。

然后通过伪元素::after添加一个子元素，利用绝对定位使该文字说明相对于图片底部左对齐，在此之前，我们可以设置伪元素的content属性来为其添加文字。

最后，我们可以设置伪元素的背景颜色、大小、行高、文本对齐、字号等属性，从而实现我们想要的文字说明效果。

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