gpt4 book ai didi

html - 如何将显示 :flex? 的图像相互叠加

转载 作者:行者123 更新时间:2023-11-28 00:45:53 37 4
gpt4 key购买 nike

我正在构建一个网站,其中我的图像在垂直和水平方向上都居中,为了实现这一点,我设置了它们的显示:flex。但是,我希望它们相互堆叠并居中。

我的 HTML 看起来像这样:

<body>
<div id="space">
<div>
<img id="outerrim" class="layer" src="./assets/css/images/outerrim.png">
<div>
<img id="innerrim" class="layer" src="./assets/css/images/innerrim.png">
</div>
</div>
</div>
</body>

我的 CSS 看起来像这样:

body, html {
height: 100%;
margin: 0;
}

#space {
background-image: url("./images/sky.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
}

.layer {
object-fit: contain;
display: flex;
flex-direction: column;
justify-content: center;
}

这就是它的样子: picture link

我希望这两个褪色的图像重叠,但我需要 flex CSS 使图像在垂直和水平方向居中对齐。

有什么建议吗?

最佳答案

将它们放在彼此之上的 flex-box 不是正确的方法。在里面制作一个position:relative 容器,将图像设置为position:absolute。将具有最高值(value)的 z-index:[1-100] 提供给顶级图像。

关于html - 如何将显示 :flex? 的图像相互叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50550268/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com