Html 在CSS中，将背景置于容器顶部中心的另一个背景之上

我试图将一个背景图像放在另一个背景图像的顶部，并将其放置在容器的顶部中心

像这样。恒星的背景是一个单独的图像，然后是行星

此时，行星背景显示在容器的左上角，并将文本替换到其底边。我想把文本放在容器的中间，因为它通常会去

我还需要反应灵敏，当在较小的屏幕（不小于笔记本电脑）上观看时，背景需要出现在相同的位置

编辑我还需要行星图像保持固定，因为稍后我将为其添加视差效果

演示

HTML

---

您可以使用多个背景，而不是将行星图像放入单独的块中：

---

如果希望植物图像与文本一起滚动，请将第一个

背景附件

值更改为

滚动

。

可以使用多个背景，而不是将行星图像放入单独的块中：

---

如果希望植物图像与文本一起滚动，请将第一个

背景附件

值更改为

滚动

。

行星透明图像非常酷。你是怎么创造出来的？行星透明图像太酷了。你是如何创建的？行星图像被放置在容器的中心，我需要它位于顶部中心（请参考我的原始帖子的截图）。是的，我需要修复行星图像，因为稍后我将对其应用视差效果。@Halnex，它看起来在中间，因为它的大小现在设置为

封面

，可以很容易地更改。但是，将其作为背景图像将不允许您进行视差测量，因此请忽略此答案（除非您可以通过更改背景位置进行视差测量，否则在这种情况下它将起作用）。我需要将其作为

img

标记才能进行视差测量？@Halnex，一点也不，但是，如果你设置

transform

属性的动画（这不是多个背景图像的情况），转换速度要快得多。行星图像放在容器的中心，我需要它位于顶部中心（请参考我的原始帖子的屏幕截图）。是的，我需要修复行星图像，因为稍后我将对其应用视差效果。@Halnex，它看起来在中间，因为它的大小现在设置为

封面

，可以很容易地更改。但是，将其作为背景图像将不允许您进行视差测量，因此请忽略此答案（除非您可以通过更改背景位置进行视差测量，否则在这种情况下它将起作用）。我需要将其作为

img

标记才能进行视差测量？@Halnex，一点也不，但是，如果设置

transform

属性的动画（多个背景图像的情况并非如此），则转换速度要快得多。

<section id="third-section">
  <div class="mars">
    <div class="mars_planet"></div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-left">The Launch</h1>
        <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
          <p class="text-left">ALorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
          <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
          <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
      </div>
    </div>
  </div>
</section>

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    background-color: #191617;
}
section {
    padding: 130px 0;
    overflow: hidden;
}
section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

#third-section {
    height: auto;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 3rem;
    color: #dcdcdc;
    background-image: url('http://i.imgur.com/XTQJ9Lo.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
#third-section h1 {
    font-size: 72px;
    color: #dcdcdc;
    text-transform: uppercase;
}
.mars {
    width: 100%;
    z-index: 0;
}
.mars_planet {
    background-image: url('https://i.imgur.com/yQfisM6.png');
    background-size: cover;
    background-position: center top;
    z-index: 200;
    width: 2364px;
    height: 1563px;
    left: 50%;
    margin: -76.3rem 0 0 -1182px;
    will-change: transform;
    opacity: 1;
    transform: translateY(0px) scale(1);
    transition: opacity 4000ms 1500ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

#third-section {
    ...
    background-image: url('https://i.imgur.com/yQfisM6.png'), url('http://i.imgur.com/XTQJ9Lo.jpg');
    background-position: center top, center top;
    background-size: 100% auto, cover;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
}