正確に固定されていない視差の背景画像

Question

div内の背景画像に微妙な視差効果を作成しようとしています。私は

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を使用していた。しかし、これはページのスクロールなどの完全に静止している背景画像を作成します。

バックグラウンドはスクロールしたいが、ページよりもはるかに遅い。

これは純粋なCSSで実現可能ですか？そうでなければ、誰でもJS/jQueryを使って正しい方向に向けることができます。 w3schools.comでこのコードで

Answer 1

若干異なっています。はい、純粋な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値は、スクロールするときにそれを遅くする。

Answer 2

見て、あなたは、あなたがこれを行うことができますカップルの方法がありますhttp://www.w3schools.com/howto/howto_css_parallax.asp