Question

我试图在div内的背景图像上创建一个微妙的视差效果。我使用了以下标记和CSS ..

HTML

<div class="widget bg-parallax" style="background-image: url(~~set dynamically~~)"></div>

CSS

.widget {
    height:500px;
    position: relative;
}
.bg-parallax {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

但是这会创建一个完全静止的背景图像作为页面滚动。

我希望滚动背景，但速度比网页慢得多。

纯CSS可以实现吗？如果没有，任何人都可以用JS / jQuery指出我正确的方向。

Answer 1

在w3schools.com上查看此代码，您的代码略有不同http://www.w3schools.com/howto/howto_css_parallax.asp

Answer 2

有几种方法可以做到这一点。是的，纯CSS可以实现。

.forefront-element {
 -webkit-transform: translateZ(999px) scale(.7);
transform: translateZ(999px) scale(.7);
z-index: 1;
 }

 .base-element {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
 }

.background-element {
-webkit-transform: translateZ(-999px) scale(2);
transform: translateZ(-999px) scale(2);
z-index: 3;
 }

这可以控制高度。负Z值使滚动时变慢。

视差背景图像并未完全固定

2 个答案: