1

背景として使用している画像があり、画面の幅全体に100％表示しようとしています。私はbackground-size：100％を適用し、MZFでは機能しますが、IEではもう伸びません。誰かがこれの回避策を知っていますか？

これがHTMLです...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        </head>
<body class="body">
            <!--Container to hold everything in the middle of page-->
            <div class="container">
</div>
</body>
</html>

これがCSSです。

.body
{
    background-image: url(final2.gif);
    background-size: 100%;
    background-repeat:no-repeat;
    background-color:#C2C2C2;
}

.container {
    width: 1000px;
    height: 1930px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    background-color:blue;
}
4

3 に答える 3

1

http://jsfiddle.net/j5q63/を参照してください

次の直後の画像を使用して背景をエミュレートできます<body>。

<img id="bg" src="path/to/your/image.png" />

その後

#bg{
    position:absolute;
    top:0;left:0;
    width:100%;
    z-index:-1;
}
于 2012-09-02T19:18:23.213 に答える
1

IE固有のalphaImageLoaderを使用することもできます。追加するだけ

.body {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='final2.gif', sizingMethod='scale');
}

あなたのスタイルシートに。または、できれば、新しいIE7 / IE8固有のcss（条件付きコメントを介して含まれる）を作成し、このスタイルをその中に入れます。

于 2013-12-09T14:57:37.967 に答える
0

テストするIEのバージョンを指定していません。IEのさまざまなバージョンには非常に異なる機能と癖があるため、これは重要です。

background-sizeこの場合、IE8以前ではCSS機能がサポートされていないため、IE8を使用していると思います。

いくつかの解決策があります。残念ながら、どれも素晴らしいものではありませんが、他のブラウザー用に既存のCSSコードを保持できるjavascriptポリフィルソリューションを使用することをお勧めします。次善の解決策は、背景画像を<img>既存の要素の後ろに重ねられたタグに置き換えることです。javascriptポリフィルはおそらくこれと同じ手法を実行しますが、透過的に実行されるため、既存のCSSを引き続き使用できます。

使用できるスクリプト：

お役に立てば幸いです。

于 2012-09-02T20:38:43.597 に答える