QuirksModeによると、複数の背景の定義は (少なくとも) IE9、Chrome、および Firefox 3.6 で機能します。
私は次のCSSを持っています:
background: #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
background: url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_edge.png") no-repeat fixed right -16px bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground1.png") repeat-x fixed left bottom, url("http://static.pokefarm.org/_img/gradients/dark_ground2.png") repeat-x fixed left 50px bottom 50px, url("http://static.pokefarm.org/_img/gradients/dark_ground3.png") repeat-x fixed left bottom 200px, url("http://static.pokefarm.org/_img/gradients/dark_lightning.png") no-repeat fixed right -100px top -150px, #190110 url("http://static.pokefarm.org/_img/gradients/dark_sky.png") repeat-x fixed left top;
これはかなり複雑な背景ですが、オンライン ゲームの背景に「暗黒の世界」のエフェクトを作成するためのものです。基本的には、3 つの異なる「地面」レイヤー、グラデーションの空、画面の側面近くの地面をフェードアウトさせる 2 つの「エッジ」、および稲妻です。古いブラウザでは、「暗い空」のグラデーションの背景のみが表示されます。
結果の効果は次のようになります: Screenshot .
問題は次のとおりです。IE9 はこの効果を完全に表示し、オプションの「アニメーション背景」効果を実行することもできます。ここでは、グラウンド レイヤーが視差方式でスクロールし、稲妻が点滅し、CSS 変換で歪みます。ただし、Firefox 6 と Chrome 13 では、フォールバック グラデーションのみの背景のみが表示されます。
なぜこれが起こるのか誰にも分かりますか？