css文字赋予图片下方

在网站设计中，通常会将图片与相关文字一起呈现，以便更好地向用户传达信息。在这种情况下，我们可以使用CSS来将文字赋予图片下方。

要实现这一效果，我们可以使用position和z-index属性将文字放置在图片下方。为了让整个效果更加稳定，我们还可以使用padding属性为文字和图片之间添加一定的间距。

.img-container {
    position: relative;
    width: 100%;
    height: 200px;
    margin: 0 auto;
}
.img-container img {
    width: 100%;
    height: 100%;
}
.img-container p {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    padding: 10px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
}
    

上面的代码示例中，.img-container是包含图片和文字的容器，其中图片使用了宽度和高度为100%的绝对定位，以便适配容器的大小。而文字则使用position属性和bottom、left属性在容器的底部居中显示。

最后我们可以设置透明的背景色和文字颜色，以便更好地与图片融为一体。这样，当用户鼠标悬停在图片上时，就能看到图片下方出现的文字，为网站的用户体验增添实用性。

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