Question

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

喜欢这个。星星背景是一个独立的图像，然后是行星。

此刻，行星背景出现在容器的左上方，并将文本移动到其下边缘。我想把文本放在容器的中间，就像通常那样。

我还需要做出回应，当在较小的屏幕（不小于笔记本电脑）上观看时，背景需要出现在同一个地方。

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

DEMO https://jsfiddle.net/73p0336p/21/

HTML

<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>

CSS

*,
*: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);
}

Answer 1

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

https://jsfiddle.net/73p0336p/30/

#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;
}

如果您希望工厂图片随文字滚动，请将第一个background-attachment值更改为scroll。

将背景置于CSS中容器顶部中心的另一个顶部

1 个答案: