css在图片下方添字

CSS 是网页前端设计中不可或缺的一部分，我们可以使用 CSS 在图片下方添字，以便更好地展示图片的信息以及获得更好的视觉效果。

HTML 代码如下：div class="img-container">
    img src="example.jpg">
    p>
    图片描述文字/p>
    /div>
CSS 代码如下：.img-container {
    position: relative;
}
.img-container img {
    display: block;
}
.img-container p {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    margin: 0;
}
    

首先，在 HTML 代码中，我们需要将图片和文字包裹在一个父级元素中。在 CSS 代码中，我们将这个父级元素的定位设置为相对定位，以便其子元素能够进行绝对定位。

通过设置图片的样式为“display: block; ”，我们可以将其显示为块级元素，从而占据整个容器的宽度。接下来，我们将文字的位置设置为相对于其包裹的父级元素进行定位，并且设置其 bottom 属性为 0，以确保其位于图片的下方。

为了让文字更加易于阅读，我们可以使用 background-color 设置其背景颜色，并透过 rgba() 函数为其设置半透明的效果。我们还使用 color 属性进行文字的颜色设置，并使用 padding 和 margin 属性来增加文字与其包裹元素的边距。

通过使用以上 CSS 代码，我们可以在图片下方添加文字，也可以通过自定义其样式使其更加符合我们的设计需求。

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