在网页设计中，图片常常被用来装饰页面，增强用户的视觉体验。但是，有时候我们需要在图片下方添加一些文字信息，这时候就需要用到CSS实现图片下加文字的效果。
首先，我们需要在HTML中插入图片和文字。我们可以用标签插入图片，用
标签插入文字：
<div class="container"> <img src="example.jpg" alt="示例图片"> <p>这是一张示例图片</p> </div>
接下来，我们可以用CSS将文字放在图片下方。首先，要确保容器元素（本例中是一个
标签）设置了position属性，并且其子元素（图片和文字）的position属性均为absolute：
.container {
position: relative;
}
img, p {
position: absolute;
}此时，图片和文字会叠在一起，且文字会覆盖图片。可以通过设置z-index属性来调整它们的覆盖顺序。一般来说，图片的z-index值应该比文字的大：
img {
z-index: 1;
}
p {
z-index: 2;
}最后，我们需要设置文字在图片下方的位置。可以通过设置文字的bottom属性来实现。bottom的值应该为文字的高度加上一定的间距，以免文字和图片挤在一起。例如：
p {
bottom: 10px;
}这样，文字就会显示在图片的下方了。完整的CSS代码如下：
.container {
position: relative;
}
img, p {
position: absolute;
}
img {
z-index: 1;
}
p {
z-index: 2;
bottom: 10px;
}通过CSS实现图片下加文字的效果，可以让网页更加美观和可读性更高。需要注意的是，在布局时一定要考虑到不同设备和浏览器的兼容性。