logo标签列表

如何使用display:flex将图像叠放在一起？

htmlcssflexbox
3
我是一个网站的开发者，需要在网站中实现图片垂直和水平居中的效果。为此，我使用了display: 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;
}

这是它的外观： 图片链接 我希望这两个淡化的图像重叠，但需要使用flex CSS使图像垂直和水平居中对齐。
有什么建议吗？
1
如果你的问题是如何将一张图片居中放置在另一张图片中间，我不明白 flex 去哪了。只需在第一张图片的父元素上设置 position:relative，在第二张图片上设置 absolute 即可。 - Mr Lister
谢谢！这就是我编程而不是睡觉的结果。我只是将 flex 样式更改为 #outerrim 并按照您说的应用了定位。 - Brooke Mortensen
http://stackoverflow.com/help/mcve - Michael Benjamin
1个回答
4

如果要将它们放在彼此上方，使用 flex-box 不是正确的方法。在内部创建一个 position:relative 容器，将图像放入其中并设置为 position:absolute。给它们赋予 z-index:[1-100]，最高值分配给顶部的图像。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接