如何在CSS中将文字定位于图片的下方？

CSS实现文字在图片下方的方法有很多种，下面是一种常见的方法：

1、使用HTML结构：

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
  <div class="text-overlay">
    <h2>标题</h2>
    <p>这里是描述文字。</p>
  </div>
</div>

2、使用CSS样式：

.image-container {
  position: relative;
  width: 100%; /* 或者设定具体的宽度 */
}
.image-container img {
  width: 100%; /* 或者设定具体的宽度 */
  height: auto; /* 保持图片的纵横比 */
}
.text-overlay {
  position: absolute;
  bottom: 0; /* 将文本定位在图片底部 */
  left: 0; /* 居左对齐 */
  right: 0; /* 居右对齐 */
  background-color: rgba(0, 0, 0, 0.5); /* 设置半透明背景色 */
  color: white; /* 设置文本颜色为白色 */
  padding: 10px; /* 添加内边距 */
}

3、相关问题与解答：

问题1：如何调整文本和图片之间的间距？

答案：可以通过修改.text-overlay的padding属性来调整文本和图片之间的间距，将其设置为padding: 20px;会增加更多的间距。

问题2：如何改变文本的背景颜色？

答案：要改变文本的背景颜色，只需修改.text-overlay中的background-color属性，将其更改为background-color: rgba(255, 0, 0, 0.5);会将背景颜色更改为红色，并保持半透明度。