在CSS中,我们可以很轻松地把文字嵌入到图片中。这种效果常见于广告图、产品宣传图等场合,可以更好地展示品牌或产品信息。下面我们来看一下如何实现这个效果。首先,在HTML文件中,需要在一个div元素内嵌
<br> <br>
<div class="image-caption"><br>
<img src="image.png" alt="图片"><br>
<p>这是图片标题</p><br>
</div><br>
<br> <br>
.image-caption {<br>
position: relative; /* 声明该元素的定位方式为相对定位 */<br>
display: inline-block;<br>
}<br>
.image-caption p {<br>
position: absolute; /* 声明该元素的定位方式为绝对定位 */<br>
bottom: 0; /* 相对于底部距离为0 */<br>
left: 0; /* 相对于左侧距离为0 */<br>
width: 100%; /* 宽度100% */<br>
background-color: rgba(0,0,0,.5); /* 背景色为半透明的黑色 */<br>
color: #fff; /* 文字颜色为白色 */<br>
margin: 0; /* 去掉p标签默认的外边距 */<br>
padding: 10px; /* 添加内边距,让文字离边框有一定距离 */<br>
z-index: 1; /* 设置p标签的z-index值大于图片的z-index值,以覆盖在图片上 */<br>
}<br>
.image-caption img {<br>
position: relative; /* 因为之前的父元素已经设置了相对定位,这里将图片设置为相对定位 */<br>
z-index: 0; /* 设置图片的z-index值小于p标签的z-index值,以便p标签覆盖在图片上 */<br>
}<br>
粉丝
0
关注
0
收藏
0