Question

我有一个固定的视差效果背景，并且在它上面有一个带有节标题的div。在此之后我有主要内容div。我显然可以在图像中包含div的内容，只是使用新图像作为背景，但我想控制div内容的大小，字体等，因此需要两者都像背景一样。这种效果可能实现吗？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

That should be pretty straightforward. All you need to do is set your title div to position: fixed and your content div to position: relative and give it a top offset of the title div's height + border (126px).

Like so:

.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的背景都表现得像一个视差背景

1 个答案: