0

与えられたスクリプトによると

<style>
.x{
    background: url('img.jpg') no-repeat;
    background-size: contain;
    height: 100%;
  }
</style>

<div class="x"></div>

chrome と firefox で問題なく動作します... IE 7、8、9 で動作させる方法を教えてください。

多くのスクリプトを試しましたが、FF や chrome のようにうまく機能するものはありませんでした。

4

1 に答える 1

0

9 より前の IE は background-size をサポートしていません:

http://www.css3.info/preview/background-size/

その場合を処理するには、別の手法を考え出す必要があります。回避策の説明については、http: //kimili.com/journal/the-flexible-scalable-background-image-reduxを参照してください。

例が必要な場合 (これが素晴らしい例だとは言いませんが、技術的に言えば動作します)、私が昨年取り組んだこのサイトのコードを参照してください。クライアントは、画面のサイズに合わせてスケーリングされ、スライドが回転すると変化する背景画像を望んでいたため、コード的には少し恐ろしくなります。

http://www.buzzhoney.com/

http://www.buzzhoney.com/Content/style.cssのさまざまな設定に注意を払う必要があります。

このサイトもレスポンシブであるはずだったので、いくつかのレベルの @media クエリを確認する必要があります。そこにはたくさんのことがあり、すべてを繰り返す時間はありませんが、ハイライトは次のとおりです。

このマークアップのシェルに基づいて (これらの主要な要素がどのように連携するかを邪魔する余分なものをすべて削除しました):

<html>
    <head>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <!-- snip header stuff -->
            </div>

            <div id="main" role="main">
                <!-- snip body stuff -->
            </div>
            <footer id="footer">
                <!-- snip footer stuff -->
            </footer>

            <div id="background">
                <div id="background-photo"><img id="bg_0" src="/Content/themes/base/images/index/bg-home-1200x933.jpg" class="opaque"></div>
            </div>

            <!-- snip js includes, per best practices, 
                 located at the bottom of the page -->
        </div>
    </body>
</html>

316 行目あたりから、背景コンテナーとその画像の初期スタイルを設定しますが、これはスマートフォン用の 320px から 480px の幅のデバイスに対してのみです。ただし、416 では、幅 321 ピクセル以上のデバイスに適用されるスタイルの設定を開始します。

#background
{
    left: 0;
    min-height: 730px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    height:100%;
}

#background img 
{
    left: 0;
    min-width: 1200px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -2;
    display:block;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

コンテナー (#background) が 100% の幅と高さに設定され、最小高さが 730px であり、内部の画像が 100% 幅に設定されていることに注意してください。 . これは基本的に、サイズが拡大し、高さが幅に比例して変化することを示していますが、幅が 1200px を下回ることはありません。そのため、その時点でコンテナーは画像の周りで折りたたまれ、収まりきらない余分な部分が非表示になります。その領域 (overflow:hidden)。

また、position:fixed と left:0、top:0 を使用してバックグラウンド コンテナーを所定の位置に固定し、z-index:-1 を使用してそれを他のすべての背後に配置していることにも注意してください。

より高い解像度で他の機能を追加するための小さな変更がありますが、この基本的なセットアップは何も変更されません。目的のために、フェード/背景の変化が必要でない限り、次の行を削除します。

    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);

背景画像が見えなくなるためです。

于 2012-10-15T14:08:38.880 に答える