html - 如何在背景图像中应用视差

Question

我有两个 block ，其中我用 background-size: cover 给出了背景图像。现在我想让它产生视差。

以下是我的代码:

HTML:

<div class="personalSessDiv">
    <div class="pi-section">
            My content
        </div>
    </div>
</div>
<div class="betterGradDiv">
    <div class="pi-section">
            My content
        </div>
    </div>
</div>

CSS:

.personalSessDiv{
    background: url(../images/common/home-bg-2.jpg) no-repeat;
    background-size: cover;
    height: 392px;
}
.betterGradDiv{
    background: url(../images/common/home-bg-3.jpg) no-repeat;
    background-size: cover;
    height: 453px;
}

Answer 1

我不确定视差是什么意思，有很多不同的变体。但是尝试将此代码添加到您希望具有滚动效果的 div 中。

我确定您可以尝试自定义以适应。

  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;
  -webkit-transition: background-image 1s;
  -moz-transition: background-image 1s;
  -ms-transition: background-image 1s;
  -o-transition: background-image 1s;
  transition: background-image 1s;
  overflow: hidden;