今天我们来讲一个CSS技巧,就是两张图片重叠互换的效果。这个效果可以用于轮播图切换或者图片展示中,给网页增添了一些动态感。 首先,我们需要两张图片,并将它们放置在同一个容器中。 <div
<div class="image-container"> <img class="img1" src="image1.jpg"> <img class="img2" src="image2.jpg"> </div>
.image-container { position: relative; width: 500px; height: 300px; } .img1 { position: absolute; top: 0; left: 0; z-index: 1; } .img2 { position: absolute; top: 0; left: 0; z-index: 2; }
.image-container:hover .img1 { z-index: 2; } .image-container:hover .img2 { z-index: 1; }
<div class="image-container"> <img class="img1" src="image1.jpg"> <img class="img2" src="image2.jpg"> </div> <br> <style> .image-container { position: relative; width: 500px; height: 300px; } .img1 { position: absolute; top: 0; left: 0; z-index: 1; } .img2 { position: absolute; top: 0; left: 0; z-index: 2; } .image-container:hover .img1 { z-index: 2; } .image-container:hover .img2 { z-index: 1; } </style>
粉丝
0
关注
0
收藏
0