[分享]css两个图片怎么叠一起

CSS可以很方便地将两个图片叠一起，下面是实现的代码。 上面的代码中,我们使用了一个div来包含两个图片，并且分别给它们添加了class，我们可以通过css来控制两张图片的样式，将它们叠在一起...

CSS可以很方便地将两个图片叠一起，下面是实现的代码。

 <div class="container">
        <img src="image1.png" class="image1" />
        <img src="image2.png" class="image2" />
    </div> 

上面的代码中,我们使用了一个div来包含两个图片，并且分别给它们添加了class，我们可以通过css来控制两张图片的样式，将它们叠在一起。

 .container {
        position: relative;
    }
    .image1 {
        position: absolute;
        top: 0;
        left: 0;
    }
    .image2 {
        position: absolute;
        top: 0;
        left: 0;
    } 

上面的代码中，我们使用了position属性让图片的位置变为绝对定位，这样可以让两张图片重叠在一起，然后将第二张图片也定位在(0，0)的位置，让他与第一张图片重叠在一起，就形成了两张图片叠在一起的效果。

使用CSS叠放顺序属性z-index可以指定两个图片的层级，使其中一个图片优先展示。

 .image1 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .image2 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    } 

上面的代码中，我们分别设置了两个图片的z-index属性，可以使用不同的编号来改变它们的重叠方式，值越大就越在上面。

通过CSS的控制，我们可以很方便地将两个图片叠一起，打造出独特的页面效果。