将 div 背景图片放在另一个 div 背景图片之上

Question

我希望马里奥图像位于下面屏幕截图中的背景之上，如您所见，它正在运行，但是我无法将马里奥图像置于背景之上。我还想删除背景图像上多余的不需要的重复图案。代码：

.marioHeader{
    background-image: url("resources/marioBackground.jpg");
    background-size: 600px;
    height: 500px;
    background-position: bottom;
    margin: auto;
}
.headermario {
    background-image: url("resources/banner.png");
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 200px;
    display: block;
    margin: auto;
}

<div class="marioHeader">
     <div class="headermario">
    </div>
  </div>

外观图片：

Answer 1

对于居中，您可以使用 flexbox 轻松做到这一点：https://jsfiddle.net/tdfu3em1/2/

给容器就行div:

display: flex;
justify-content: center;
align-items: center;

现在 child div 将居中。

至于重复模式，没有足够的信息知道。它是否在原始图像中重复？我猜不会，而且你没有 no-repeat。但是你想在它的地方发生什么？没有？背景颜色？有点依赖。

将 div 背景图片放在另一个 div 背景图片之上

Position div background image on top of another div background image

html

css

image

background-image