0

div で背景を 100% の高さにし、x 軸で bg を繰り返そうとしています。

このコードを使用すると、最新のほとんどのブラウザーで動作します。

background: url(/img/bg.jpg);
background-size: auto 100%;

しかし、background-size は IE <= 8 では機能しません。したがって、これを少なくとも IE 8 で機能させるための解決策を探しています。

IE フィルター コードについては知っていますが、これはコンテナー div 内の bg のみをストレッチします。しかし、繰り返すにはbgが必要です。

実用的なソリューションはありますか？多分jQueryで？ポリフィル？

4

2 に答える 2

1

背景サイズはサポートされていません。このような場合に私が行うCSSのトリックの1つは、実際の画像を背景として設定することです。すべてのコンテンツが という div に収まるとし<div id="myLargeBGDiv">ます。

その div を作成する必要がありposition: relative; ます。次に、絶対に配置された画像を作成し、それを and に設定しtop: 0;ますleft: 0;。

position: relative;次に、画像とコンテンツ div に z-index を設定しながら、そこにコンテンツ div も配置します。

これがサンプルです。

CSS

<style type="text/css">
    /*This stretches by width. Set the element's height to 100% where needed. It will work that way as well.*/
    #myLargeBgDiv {position:relative;width:100%;}

    #stretchMe {position:absolute;top:0;left:0;width:100%;height:auto;z-index:33;}

    #myContentDiv {position:relative;z-index:50;}
</style>

HTML

<!--html-->
<div id="myLargeBgDiv">
   <img id="stretchMe" src="path/to/image.png" />
   <div id="myContentDiv">
      THIS IS SOME CONTENT THAT GOES OVER THE IMAGE CREATING THE EFFECT OF BG IMAGE
   </div>
 </div>

絶対位置が要素を「オフフロー」させない古いブラウザーでは、絶対位置として「myContentDiv」も必要になる場合がありますが、コンテンツの高さに関して制限が課されます。事前にテストして、実際に機能することを確認してください。

于 2012-08-17T12:39:34.527 に答える
0

このリンクを確認してくださいIE 8: background-size fix

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
于 2012-08-17T12:22:48.703 に答える