[分享]css两个图片重叠

CSS是网页设计必备的重要技术之一，其中有一种常见的效果就是实现图片重叠展示。在CSS中，我们可以通过设置各个元素的定位和层级来轻松实现。下面我将介绍两个实现图片重叠的例子。 .contain...

CSS是网页设计必备的重要技术之一，其中有一种常见的效果就是实现图片重叠展示。在CSS中，我们可以通过设置各个元素的定位和层级来轻松实现。下面我将介绍两个实现图片重叠的例子。

 <div class="container">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
    </div>

    <style>
        .container {
            position: relative;
        }
        .container img {
            position: absolute;
            top: 0;
            left: 0;
        }
        .container img:last-child {
            z-index: -1;
        }
    </style> 

以上代码实现了两张图片的重叠展示。首先，我们设置了一个容器元素，并将其定位属性设置为“relative”；然后，我们给两张图片分别设置了“position: absolute; top: 0; left: 0;”属性以使它们对准容器的左上角。最后，我们给最后一个图片设置了“z-index: -1;”属性，使其置于下层，就能实现图片重叠效果了。

 <div class="container">
        <div class="image1"></div>
        <div class="image2"></div>
    </div>

    <style>
        .container {
            position: relative;
        }
        .container div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .image1 {
            background: url(image1.jpg) no-repeat center center / cover;
        }
        .image2 {
            background: url(image2.jpg) no-repeat center center / cover;
            opacity: 0.5;
        }
    </style> 

以上代码实现了使用两个div元素展示图片。我们同样设置一个容器元素，并将其定位属性设置为“relative”，然后分别给两个div元素设置“position: absolute; top: 0; left: 0; width: 100%; height: 100%;”属性。接着，我们使用CSS中的background属性来设置每个div元素的背景图片，并通过cover属性使图片充满整个div元素。我们还为第二个div设置了“opacity: 0.5;”属性，使它半透明，从而产生重叠效果。

总结来说，实现图片重叠展示的方法有很多，但基本思路都是通过定位和层级来实现。希望本文中的例子能帮到大家，也欢迎大家自己动手尝试各种方法，创造出更多的精彩效果。