在网页制作中,经常会需要显示多张图片,有时候为了美观起见,我们需要将两张或多张图片重合成一张图片显示。在这种情况下,css就是一种非常好用的工具。下面我们介绍一种方法,用css实现两张图片重合。我们先来看一下代码:
<div class="img-Box"> <img src="img1.png" class="img1"> <img src="img2.png" class="img2"> </div>
我们首先用一个<div>包住两张图片,用两个<img>标签分别引用这两张图片。接下来我们需要设置这两张图片的样式:
.img-Box { position: relative; } .img1,.img2 { position: absolute; top: 0; left: 0; }
我们将包含两张图片的<div>设置为相对定位,将两张图片同时设置为绝对定位,并且将它们的位置都设置为左上角。这样,两张图片就重合在了一起。但是,这时候还有一个问题,就是两张图片的显示顺序问题。我们可以通过z-index属性来解决这个问题:
.img1 { z-index: 1; } .img2 { z-index: 2; }
我们将第一张图片的z-index设置为1,第二张图片的z-index设置为2,这样第二张图片就会显示在第一张图片的上面。
最后,我们可以通过设置两张图片的width和height属性来控制它们的大小:
.img1,.img2 { width: 200px; height: 200px; }
这样,两张图片就被设置为200px×200px的大小了。