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

Question

我有两个块，其中我给出了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;

Answer 2

这就是我需要的，当我谷歌你的问题，它为我工作CSS background-attachment属性

body { 
     background-image: url('image.png');
     background-repeat: no-repeat;
     background-attachment: fixed;
}