4

私は以前にこれをやったので、それが可能であることはわかっていますが、今はうまくいかず、私の脳をいじっています! うまくいけば、近隣のすべての IE を 100 万ビットに粉砕する前に、誰かが私を助けてくれることを願っています。

私がやろうとしているのは、OrnamentoのWeb サイトのようなものを再作成することです。ユーザーがスクロールすると、写真が重なり合います。それらは、個別の div にレイヤー化された固定背景画像で行われます。効果は次のようになります。

これは、スクロールされていない Web サイトです。

オーナメント・アンスクロール

そして、これがスクロールしたウェブサイトです

オーナメントスクロール

ご覧のとおり、背景画像は同じ場所にとどまりますが、別の div 内の他の背景画像によって徐々にオーバーレイまたは「引き継がれ」ます。これは Chrome、Firefox、Opera、IE10、IE9、Safari、IE8 (おそらくその他) で動作します。CSS3 の背景カバーと固定された背景位置で行われています。

そこで、私のベータ サイトであるStriking Fotoでこれを複製しようとしました。レガシーIE（8以下）を除くすべてで動作するようになりました。完全な背景画像に IE フィルターを使用していましたが、見栄えがよくなりました。

私は次のコードを使用しました (コンテンツを含む 5 つの div があり、それぞれに home、about、gallery、price、および contact というラベルが付けられています。

#home, #about, #gallery, #pricing, #contact { 
position: relative; 
display: block; 
height: 100%; 
width: 100%; 
background: url(../assets/style_images/home_background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
border-bottom: 5px solid #000;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='assets/style_images/home_background.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/home_background.jpg', sizingMethod='scale')";}

#about { background-image: url(../assets/style_images/about_background.jpg);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/about_background.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/about_background.jpg', sizingMethod='scale')";}

#gallery { background-image: url(../assets/style_images/gallery_background.jpg); 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/gallery_background.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/gallery_background.jpg', sizingMethod='scale')";}

#pricing { background-image: url(../assets/style_images/pricing_background.jpg); 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/pricing_background.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/pricing_background.jpg', sizingMethod='scale')";}

#contact { 
background-image: url(../assets/style_images/contact_background.jpg); 
border: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/contact_background.jpg', sizingMethod='scale'); 
 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/style_images/contact_background.jpg', sizingMethod='scale')"; }

(注: この IE フィルターは、画像が CSS ファイルではなくインデックス ファイルからのリンクで参照されている場合にのみ機能すると思います。これについては間違っているかもしれませんが、リンクが同じではないのはそのためです。)

私はこれがうまくいくと思っていましたが、うまくいきませんでした。IEでスクロールすると、これが起こっているのを見ました：

IE8 が正しくスクロールしない

背景の位置を固定する代わりに、背景画像をスクロールします。だから私はそれが IE フィルターであると考えました。だから私はそれらを削除して、もう一度やり直しました。今回は以下の画像を取得しました。

IE8 が正しくスケーリングしない

画像は右にスクロールするようになりましたが、背景画像はフルスクリーンではありません。

私の HTML は次のようになります (小さくて読みやすいように編集されています)。

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>Striking Foto</title>
 <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 </head>

 <body>
 <header></header>

 <div id="home">
    <!--nothing except images-->
 </div>
 <div id="about">
    <div class="wrap">
        <article>
        <!--nothing except content-->
        </article>
    </div>
</div>
<div id="gallery">
    <div class="wrap">
        <article>
        <!--content-->
        </article>
    </div>
</div>   
<div id="pricing">
    <div class="wrap">
        <article>
        <!--content-->
        </article>
    </div>
</div>   
<div id="contact">
    <div class="wrap">
        <article>
            <!--content-->
        </article>
    </div>
</div>  
</body>
</html>

それで、私は立ち往生しています。どういうわけか、Ornamento は IE でそれを行います。私は以前にそれを行ったことがありますが、方法がわからず、実際に助けを借りることができました。必要に応じてすべての CSS を提供できますが、オンラインで見ることもできます。

どうもありがとう！

4

1 に答える 1

1

これで、ornamento.com の画像が全幅ではないことに気付きました。ブラウザを可能な限り広げてみてください;-)

最良のオプションはhttp://srobbin.com/jquery-plugins/backstretch/を ie 条件付きで使用することで、画像は ie でスクロールしません

または、エッジが見えないように画像を十分に大きくします。つまり、「カバー」のサイズの他のブラウザーでも問題なく表示されます。

これがこれを見つけた他の人の助けになることを願っています! 私はそれに何時間も費やしました

于 2013-03-08T22:51:15.467 に答える