0

背景画像をブラウザウィンドウのサイズに合わせて拡大縮小する方法を知っている人はいますか? CSS3 が背景の幅を許可していることは知っていますが、もっと互換性のあるものが必要です。

どうもありがとう、

エリオット

4

3 に答える 3

3

background-imageサイジングをサポートしていないため、 では実行できません。img両方向に 100% 伸びるタグを配置し、絶対配置とz-index. このようなものが動作するはずです:

<body>
    <img class="bgimage" src="bgimage.jpg" />
    <div id="content">
        Your content here...
    </div>

そしてCSSで：

html, body {
    min-height: 100%;
}

.bgimage {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

それをテストしていませんが、少なくともいくつかのスターターが得られるはずです。

于 2010-02-04T14:36:02.513 に答える
1

これがトリックです（http://css-tricks.com/how-to-resizeable-background-image/から）

次のようにイメージを定義します。

<body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

そしてあなたのCSSは次のようになります:

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}
于 2010-02-04T14:39:26.873 に答える
0

非常に明るい画面を使用する予定がある場合は、問題ありません。
ただし、混雑したページの背景として画像を使用する予定がある場合は、この機能を放棄した理由がいくつかあります。

  • 一部のブラウザーでは、高速にレンダリングするのに苦労しました。最初は、リフローとウィンドウのサイズ変更中です。

  • 画像ごとに、ファイル サイズと画像の鮮明度のバランスを見つけるのに多くの時間を費やす必要がありました。大画面のユーザー ベースが拡大しているため、これは簡単なことではありません。

  • 大きな画像を読み込んでいる間に、最初に画像の低解像度バージョンを読み込もうとさえしました。非常に良い効果が得られましたが、さらに多くのブラウザー リソースを消費しました

引き伸ばされた画像をドロップすると、アプリは再び高速になり、画像で遊んで先延ばしにする必要がなくなりました ;)

于 2010-02-04T16:23:01.300 に答える