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后台附件属性

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

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

2 个答案: