0

そのため、ページの左下にある背景画像を使用しようとしていますが、それを修正してブラウザー ウィンドウでサイズを変更したいと考えています。

この目標を達成するための唯一の方法は、'background-size: 100%' を使用することですが、それでは画像が高すぎます。したがって、実際に適合させるために何を使用すればよいかわかりません。

助言がありますか？

これは私の現在のコードです...

body {
background-color:#000000;
background-image:url(Image.png);
background-position: 0% 100%;
background-attachment:fixed;
background-repeat:no-repeat;
    background-size: 100%;

}

4

1 に答える 1

1

そうですね、複数の valuebackground-sizeを取ります。次のようなことを試すことができます：

background-size: auto 100%;

ただし、簡単にするために、まず次のことを試してください。

background-size: cover;

これにより、背景の幅が100%高さの縦横比に自動的に調整されます。これにより、背景画像が高さよりも小さくなったり大きくなったりすることはありませんが、幅はブラウザーのアスペクト比に応じて変化します。

補遺

またbackground-size、すべてのブラウザでサポートされているわけではありません。Internet Explorer のサポートが問題である場合は、Javascript フォールバックを強くお勧めします。また、常に素敵な Chris Coyier の「Perfect Full Page Background Image」に関する記事を読むことを強くお勧めします。あらゆる種類のフォールバックについて説明します。

于 2012-08-28T03:06:29.367 に答える