在网页中,常常需要在图片上加上文字来起到讲解、解释的作用,同时也能让网页内容更加生动。下面我们来介绍如何使用 CSS 实现图片内加文字。
.image{
position: relative;
}
.text{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
padding: 10px;
}
首先,我们需要将图片和文字的父元素设置为相对定位。
<div class="image">
<img src="example.jpg">
<div class="text">这是图片描述文字</div>
</div>
接着,我们使用绝对定位将文字放到图片的底部,左侧,然后设置文字的宽度为 100%。我们还可以添加一个半透明的背景色和白色的文字颜色来使文字更加清晰可见。最后,我们可以设置文字的字号大小和内边距,以适应不同的图片大小和描述长度。
通过以上的 CSS 样式和 HTML 代码,我们可以轻松地实现图片内加文字的效果,让网页内容更加生动、详尽。