在CSS样式中,我们可以很方便地在图片上添加文字。这种方法广泛应用于网站设计和商业广告设计。下面我们就来一起了解一下如何在图片上添加文字。首先,我们需要使用HTML语言将图片插入到网页中。比如下面的代
<div class="image-box"><br>
<img src="images/pic.jpg" alt="一张美丽的图片"><br>
</div>
<div class="image-box"><br>
<img src="images/pic.jpg" alt="一张美丽的图片"><br>
<p class="caption">这是一张美丽的图片</p><br>
</div>
.image-box {<br>
position: relative;<br>
display: block;<br>
width: 500px;<br>
height: 300px;<br>
overflow: hidden;<br>
}<br>
.caption {<br>
position: absolute;<br>
bottom: 0;<br>
left: 0;<br>
width: 100%;<br>
height: 50px;<br>
font-size: 16px;<br>
color: #fff;<br>
background-color: rgba(0, 0, 0, 0.5);<br>
opacity: 0.8;<br>
}
粉丝
0
关注
0
收藏
0