CSS中可以实现两张图片重叠在一起,同时还可以设置其中一张图片为透明效果。 .container { position: relative; } img { position: absolute; t
CSS中可以实现两张图片重叠在一起,同时还可以设置其中一张图片为透明效果。
.container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
.overlay-img {
opacity: 0.6;
}
以上代码中,我们先创建了一个容器并设置其为相对定位,这是因为后面设置绝对定位的元素需要相对于其父元素进行定位。
接着,我们通过设置两张图片的绝对定位,让它们重叠在一起,同时可以通过调整top和left来达到想要的位置效果。
最后,通过设置覆盖图的opacity属性,让其透明度为0.6,从而呈现出透明的效果。
下面是HTML部分的代码,其中覆盖图需要放在后面作为后面的图片。
<div class="container">
<img src="IMAGE1.jpg" alt="图片1"/>
<img src="IMAGE2.jpg" alt="图片2" class="overlay-img"/>
</div>
粉丝
0
关注
0
收藏
0