css在图片上添加内容

CSS是前端开发中不可或缺的重要技能，在CSS中，我们可以对元素进行各种各样的样式调整，其中一种很常见的操作是在图片上添加内容，接下来我们就来介绍一下如何使用CSS在图片上添加内容。

img {
    position: relative;
}
img::after {
    content: "这是图片上的文字";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    padding: 10px;
}
    

首先，我们给图片添加position: relative; 属性，这是因为图片使用绝对定位来添加内容，需要有一个相对定位的父级元素。

然后，我们使用伪元素::after来添加内容，这个伪元素会在图片下面添加一个层级。

接着，我们调整伪元素的位置，这里的bottom: 0; 表示伪元素距离图片底部0px，left: 0; 表示距离图片左侧0px。

下一步是调整伪元素的宽度，我们使用width: 100%; 使得伪元素能够占满图片的整个宽度。

然后，我们添加一个背景颜色，这里使用rgba(255, 255, 255, 0.7); 表示白色半透明背景。

接着，我们使用box-sizing: border-box; 和padding: 10px; 来调整伪元素的边框和内部距离，从而使得文字更加美观。

最后，我们在content属性中添加要显示的内容，这里使用了一个字符串。

通过以上的操作，我们就能够在图片上添加文字啦！

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