css 在图片后显示多行文字
导读：在网页设计中，图片常常用来增强页面的视觉效果。但有时候我们希望在图片的下方显示一些文字来更好的表达页面的内容和信息。那么在CSS中，我们可以通过以下的方法来实现这个效果：首先，在HTML中我们需要写出一段包含图片和文字的代码，代码如下所示：...
在网页设计中，图片常常用来增强页面的视觉效果。但有时候我们希望在图片的下方显示一些文字来更好的表达页面的内容和信息。那么在CSS中，我们可以通过以下的方法来实现这个效果：首先，在HTML中我们需要写出一段包含图片和文字的代码，代码如下所示：``` 这里是文字的多行内容，可以根据需要来填充更多的内容。
```接着，在CSS中，我们可以通过设置 div.img-text 和 p 元素的样式来使文字出现在图片下方。代码如下所示：```div.img-text { position: relative; /* 设置 div.img-text 的 position 属性为 relative */} div.img-text img { display: block; margin: 0 auto; /* 设置图片为 display:block 以便在上下文中占据足够的空间 */} div.img-text p { position: absolute; /* 设置 p 元素的 position 属性为 absolute，这样可以让它位于图片的下方 */ bottom: 0; left: 0; right: 0; /* 设置 p 元素与 div.img-text 的四个边的距离为0，使其充满整个div容器 */ text-align: center; /* 水平居中文本 */ font-size: 14px; /* 设置字体大小 */ line-height: 1.5; /* 设置行高 */ padding: 10px; /* 为p元素添加padding，使文字距离边缘有一定距离 */ background-color: rgba(0, 0, 0, 0.7); color: #fff; /* 设置黑色半透明背景和白色文字颜色 */} ```至此，我们就通过CSS实现了在图片下方显示多行文字的效果。需要注意的是，这段代码中的 div.img-text 和 p 标签都是写在同一个HTML代码块中的，而相关的CSS样式应该将它们放在一个样式块中。完整的代码请见下面的pre代码块：```div class="img-text">
img src="example.jpg" alt="example">
p>
这里是文字的多行内容，可以根据需要来填充更多的内容。/p>
/div>
/* CSS样式 */div.img-text {
position: relative;
}
div.img-text img {
display: block;
margin: 0 auto;
}
div.img-text p {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 14px;
line-height: 1.5;
padding: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css 在图片后显示多行文字
本文地址： https://pptw.com/jishu/538814.html