[分享]css中如何在图片下加文字

CSS中怎么在图片下加文字，其实非常简单，只需要将图片作为父元素，将文字作为子元素，然后用CSS的定位属性进行定位即可。 下面是示例代码： 这里是图片说明文字 .container { : ...

CSS中怎么在图片下加文字，其实非常简单，只需要将图片作为父元素，将文字作为子元素，然后用CSS的定位属性进行定位即可。
下面是示例代码：

 <div class="container">
    <img src="your-image-url.jpg" alt="Your image">
    <p class="caption">这里是图片说明文字</p>
 </div>
<br>
<style>
.container {
  position: relative; /* 确保图片作为定位的父元素 */
  width: 100%; /* 设置宽度 */
}
<br>
.caption {
  position: absolute; /* 定位文字 */
  bottom: 0; /* 在图片底部 */
  left: 0; /* 靠左显示 */
  right: 0; /* 适应图片宽度 */
  background-color: rgba(0, 0, 0, 0.5); /* 背景色为半透明黑色 */
  color: #ffffff; /* 文字颜色为白色 */
  padding: 10px; /* 空白填充 */
  margin: 0; /* 去除默认的外边距 */
  text-align: center; /* 文字居中显示 */
}
</style> 

解释一下代码：
首先，我们使用一个div元素作为容器，将图片和说明文字包含在其中。在CSS中，我们将这个容器设为定位的父元素，这样就可以将文字定位在图片的下方了。
然后，我们给图片和文字分别设置了class属性，使用CSS选择器来控制它们的样式。
对于图片，我们使用了一个img元素来引用它，并设置了它的宽度为100%，这样就可以适应容器的大小。注意，我们不要为图片设置高度，这样它就会保持原来的纵横比例。
对于文字，我们使用了一个p元素，并给它添加了类名“caption”。我们将它的位置设为“absolute”，这样它就可以脱离文档流，并且可以相对于父元素进行定位。
我们将文字放置在图片的底部，使用了“bottom: 0”的属性，然后将它靠左显示，使用了“left: 0”的属性。接下来，我们使用了“right: 0”的属性，使得文字可以适应图片的宽度，而不会超出其边界。
为了让文字更加清晰可见，我们使用了一个半透明的黑色背景色，使用了“background-color: rgba(0, 0, 0, 0.5)”属性。同时，我们将文字颜色设置为白色，使用了“color: #ffffff”的属性。最后，我们添加了一些填充和边距属性，以使得文字和图片之间有足够的间隙。
这样，就可以轻松地在图片下方添加说明文字了。