Question

我有一系列相同尺寸的img，现在我希望这些图像叠加在一起，一个在另一个上。为此，我将图像的位置设置为绝对，但问题是容器的尺寸不正确，因为图像是绝对定位的......

此外，图像必须根据浏览器大小调整大小

有人知道插入一些覆盖图像的解决方案吗？

<html>
    <head></head>
    <body>
        <div id="container">
            <img src="image1" />
            <img src="image2" />
            <img src="image3" />
        </div>
    </body>
</html>

div容器必须获得3 img的大小，所有img都有相同的大小，并且必须相互重叠...

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

Answer 1

诀窍是通过使用类似

之类的东西，只将其中一个设置为相对

#container img:first-of-type {
    position:relative;
}

相对图像将设置尺寸，即使您重新排列订单，绝对图像也会位于顶部（或后面）。

Answer 2

我要在background-image css属性中设置多个图像。

CSS：

#container {
  background-image: url('image1'), url('image2'), url('image3');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /*background-size: cover; - alternatively, see the explanation below */
}

HTML：

<body>
  <div id="container"></div>
</body>

使用background-size: cover|contain;可确保浏览器正确缩放图片，使其始终符合#container的实际尺寸。

background-size: cover;的行为如何？

将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

background-size: contain;的行为如何？

将图像缩放到最大尺寸，使其宽度和高度都适合内容区域

参考/进一步阅读：

使用css

2 个答案: