2

ページの背景として拡大する画像が必要です。画面の解像度がどうであれ、ページが適切に拡大縮小されなくても、画像全体が画面に表示される必要があります。Google でいくつかの解決策を見つけましたが、Firefox2 や IE6、またはその両方では機能しませんでした。これら 2 つも必要です。人々がソフトウェアをアップグレードしないのは嫌いですが、Google アナリティクス データでこれらのブラウザが Web ページ、特に IE6 にヒットしているのを今でも目にします。

これに適したクロスブラウザソリューションはありますか?

4

4 に答える 4

7

高さと幅の属性なしで、古き良きimgタグを使用できます。CSSで、絶対に低いzインデックスで配置し、高さと幅を「100％」に設定します。

他のすべてを、より高いz-indexを持つ別のdivのページに配置します

このような：

<style type="text/css">
#stretchy {
    postion: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}
#everything_else {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}
</style>

...

<img src="/images/myimage.jpg" id="stretchy" />

<div id="everything_else">
    ...
</div>

例については、 http：//axoplasm.com/lost.htmlを参照してください。

これは正確には「背景画像」ではありませんが（おそらくW3C標準に準拠したCSSではありません）、機能します。

于 2009-07-11T04:17:55.930 に答える
3

この質問をハイジャックしたくありませんが、次のコードがある場合:

background-image: url('images/background.gif');
background-size: 100%;

これは、現在のすべてのブラウザー (IE、FF、GC、SF、OP) で画像を繰り返しますが、z-index 深度メソッドとは異なり、すべてのブラウザーで不快に動作します (前景が複雑です)。

しかし、ブラウザが突然 bg サイズの CSS3 サポートを取得した場合、CSS3 仕様はどうすべきかを規定していますか? 画像を引き延ばすべきか、それともいつものように繰り返すべきか?

于 2009-12-08T12:14:54.867 に答える
1

CSS1 または CSS2 では不可能ですが、CSS3 では可能です: requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/

ただし、これは IE6 では使用できません。

別の方法としては、background-repeat を使用するか、このサイトに機能する可能性のあるものがあります (機能するかどうかは確認していません): webdesign.about.com/od/css3/f/blfaqbgsize.htm

ユーザーがブラウザーをアップグレードしないというあなたの言いたいことはわかりますが、どの時点で IE5 や IE4 のコーディングをやめるのですか?

幸運を、

マット

于 2009-07-11T01:16:55.013 に答える
1

代わりに、パターンまたは単色にフェードアウトする「静止画像」を使用することをお勧めします。そうすれば、背景画像 (どんなに大きくても) とスケーラビリティを確保できます。

CSS3 では、background-size: 100%; を使用できます。

Firefox 3.5 はいくつかの CSS3 プロパティをサポートしていますが、まだすべてをサポートしているとは思えません... (私はそう思います)。

于 2009-07-11T01:24:15.673 に答える