css在图片下方加文字

CSS在图片下方加文字是一种常见的美化网页的方式，它可以让图片更加生动、有趣，同时增加页面的可读性和视觉效果。

/*代码如下*/.image {
    position: relative;
     /* 图片容器设置为相对定位 */width: 200px;
    height: 200px;
}
.image img {
    width: 100%;
    height: 100%;
    display: block;
}
.text {
    position: absolute;
     /* 文字容器设置为绝对定位 */bottom: 0;
     /* 距离图片底部0px */background-color: rgba(0, 0, 0, 0.5);
     /* 设置文本背景颜色和透明度 */color: #fff;
     /* 设置文本颜色 */width: 100%;
    padding: 10px;
    box-sizing: border-box;
 /* 确保padding不影响元素宽度 */}
    

以上代码中，我们先将图片容器和文字容器都设置为相对定位，这样可以让文字在图片的基础上进行定位。然后，我们设置图片的宽度和高度为100%，即使图片大小改变，它也会自动适应容器大小。接着，设置文字容器的定位为绝对定位，让它距离图片底部为0，这样文字就出现在了图片下方。我们使用rgba函数来设置背景颜色和透明度，使得文字更加清晰醒目。设置文本颜色为白色，使得文字更加醒目，接着设置文本宽度为100%，padding为10px，这样可以确保文字容器在图片上展示出与之相匹配的大小，同时padding不会影响文字容器的大小。

这是一个很简单的例子，你可以根据自己的需求和创意，改变样式和设置，来实现更加美丽和有趣的网页效果。

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