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

【问题标题】：How to make a background with a div on top both behave like a parallax background如何使顶部带有 div 的背景都表现得像视差背景
【发布时间】：2016-08-31 16:42:10
【问题描述】：

我有一个固定的视差效果背景，在它上面有一个带有部分标题的 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>

【问题讨论】：

问题太混乱了。我不知道你在找什么。

标签： html css parallax

【解决方案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>

【讨论】：

确实，视差通常是这种情况，但要实现这一点，您需要一些 javascript 并且固定的背景行程对于我的用例来说已经足够了。