CSS可用于重叠两张图片,从而创建一种新的图像效果。要实现这一目的,我们需要先在HTML中插入两张图片,然后设置它们的CSS样式。
<div class="image-container"> <img src="image1.jpg" alt="image1" class="image1"> <img src="image2.jpg" alt="image2" class="image2"> </div>
如上所示,我们在一个名称为“image-container”的div容器中插入两张图片。现在,我们需要通过CSS使第二张图片在第一张图片之上。为此,可以使用“position”属性来设置每张图片的位置。
.image-container { position: relative; } .image1 { position: absolute; z-index: 1; } .image2 { position: absolute; top: 0; left: 0; z-index: 2; }
注意,在设置.position属性时,我们将容器变成“相对定位”。这样做是为了确保两张图片在文档流中保持正确的位置。我们还将第二张图像的z-index设置为2,因此它将出现在第一张图像(z-index为1)之上。
此时,两张图片应该已经重叠了。如果您希望通过CSS更改两张图片的大小和布局,可以使用常规的CSS属性(如“width”、“height”、“left”、“top”)。
试试这种方法!您可能会惊讶于您可以通过重叠图像来获得多么酷的效果。