运用img怎么在CSS里实现两个图片的叠加

img


运用img怎么在CSS里实现两个图片的叠加，一个图片在另一个图片上面

要在 CSS 中实现两个图片的叠加，可以通过 position 和 z-index 属性来实现。

首先，需要将两张图片都设置为绝对定位（position: absolute），并设置它们的位置和大小。然后，将其中一个图片的 z-index 属性设为比另一个图片更大的值，这样它就会覆盖在另一个图片之上，实现叠加的效果。

下面是一个示例代码：

HTML：


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

CSS：


.image-container {
  position: relative; /* 为了使内部元素的定位相对于该容器 */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-container img:first-child {
  z-index: 1; /* 第一张图片的 z-index 设为 1 */
}

在这个示例中，我们将两张图片放在一个 div 容器中，并将容器的定位设置为相对定位（position: relative），以便内部元素的定位相对于该容器。

然后，我们将两张图片的定位都设置为绝对定位（position: absolute），并将它们的位置设置为左上角（top: 0; left: 0），大小设置为占满整个容器（width: 100%; height: 100%）。

最后，我们通过 :first-child 选择器将第一张图片的 z-index 属性设为 1，使其覆盖在第二张图片之上，实现叠加的效果。

注意，为了使叠加效果更明显，两张图片最好有一些透明度，可以通过设置 opacity 属性来实现。

你这个我做过..... 用定位+zindex层级控制

定位加 z-index

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 400px;
            height: 400px;
        }
        .image1 {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }

        .image2 {
            position: absolute;
            z-index: 2;
            top: 10px;
            left: 10px;
        }
    </style>
</head>

<body>
    <img src="https://img2.baidu.com/it/u=1720783862,1844842465&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625" class="image1">
    <img src="https://img1.baidu.com/it/u=2966273683,935963952&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625" class="image2">
</body>

</html>