不完全固定的視差背景圖像

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值使滾動時變慢。