如何使顶部带有 div 的背景都表现得像视差背景

Question

我有一个视差效果的固定背景，在它上面有一个 div 和一个部分标题。接下来是主要内容div。我显然可以在图像中包含 div 的内容，只使用新图像作为背景，但我想控制 div 内容的大小、字体等，因此需要让两者都像背景一样。这个效果可以实现吗？

这是一个示例代码：我想要得到的是标题 div 被修复并且表现得像视差背景。

.parallax{
  background-image: url('http://i.stack.imgur.com/jGlzr.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.title{
  position: relative;
  display:flex;
  height: 120px;
  width: 120px;
  border: 3px solid white;
  left: calc(50% - 60px);
  align-items: center;
  justify-content: center;
}
.content{
  background-color: red;
  height:800px;
}

<div class="parallax">
  <div class="title">
    <h3>
      A title
    </h3>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

Answer 1

这应该很简单。您需要做的就是将您的标题 div 设置为 position: fixed 并将您的内容 div 设置为 position: relative 并为其提供标题 div 的顶部偏移高度 + 边框 (126px).

像这样：

.parallax{
  background-image: url('http://i.stack.imgur.com/jGlzr.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.title{
  position: fixed;
  display:flex;
  height: 120px;
  width: 120px;
  border: 3px solid white;
  left: calc(50% - 60px);
  align-items: center;
  justify-content: center;
}
.content{
  height:800px;
  position: relative;
  top: 126px;
  background-color: red;
}

<div class="parallax">
  <div class="title">
    <h3>
      A title
    </h3>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

如何使顶部带有 div 的背景都表现得像视差背景

How to make a background with a div on top both behave like a parallax background

html

css

parallax