0

画面全体に広がるcssを介して画像をロードしたい。css：

body {

    background: url(images/reelgoodguide2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    overflow: auto;
    margin: 0px;
    padding: 0px;

}

これはChrome、Firefox、IE9で完全に機能します。

ブラウザがIE8またはIE7の場合、追加のcssファイルを含めるための条件がhtmlにあります。このcssには次のものが含まれます。

body{

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reelgoodguide2.jpg', sizingMethod='scale')";
}

ただし、alphaimageloaderが画像を画面全体に拡大する代わりに、画像は中央に配置されたままになり、サイズは変更されません。

注：開発者ツールを開くと、cssファイルがそこにあることがわかります。filterプロパティを無効にしても、何も起こりません。私が間違っていることへのヒントはありますか？

前もって感謝します。

4

3 に答える 3

5

OKAY...ちょっといじった後、これが私が理解したものです：

1 つ目:
 画像へのフィルター パスは、css ファイルではなく、html ドキュメントに対して相対的です。イライラする

2番目:の代わりに に
  フィルターを適用することで、これを機能させました。htmlbody

IE の回避策が適用されないことを読みましたがhtml、(画像パスの問題を解決した後) 引き伸ばされた背景画像があることに気付きましたが、それは他のすべての背後にありました。

于 2012-06-18T19:17:46.480 に答える
0

CSSだけでは無理だと思います。特大を検索します。いくつかの JavaScript ライブラリが見つかります。

于 2012-06-18T19:20:30.007 に答える