[分享]css两个图片重合

CSS可以帮助我们实现很多效果，其中一种就是将两个图片重叠放置。我们可以通过zindex属性来控制图片层级，并利用属性来定位图片的位置。.img1{ :absolute; top:0; left:0;...

CSS可以帮助我们实现很多效果，其中一种就是将两个图片重叠放置。我们可以通过z-index属性来控制图片层级，并利用position属性来定位图片的位置。

.img1{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}
.img2{
    position:absolute;
    top:0;
    left:0;
    z-index:2;
} 

上述代码中，.img1和.img2是两张图片的类名。position:absolute;将它们设置为绝对定位，top和left属性指定了图片的位置，z-index属性控制图片层级，使.img2在.img1的上方。

如果我们要让两张图片重叠平铺，可以通过使用background属性来实现。

.container{
    background:url("img1.jpg") no-repeat center center;
}
.container img{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
} 

上述代码中，.container是一个容器类名，利用background属性设置了背景图片，并且不重复，居中对齐。接着通过绝对定位将img标签放在背景图片之上，并且设置了z-index属性为1，保证图片重叠在背景图片之上。

通过以上两种方法，我们可以实现两张图片的重叠效果，提高网页的视觉效果和美观程度。