CSS を使用して全画面対応の背景画像を作成するにはどうすればよいですか?

CSS を使用した全画面レスポンシブ背景画像の作成

Web デザインでは、全画面レスポンシブ背景画像を作成すると、Web ページの視覚的な魅力を高めることができます。ただし、画像がページを完全に覆わないという問題が発生するとイライラすることがあります。次の例を考えてみましょう。

body {
    background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
}

このコードでは、カバレッジが不十分なため、背景画像が右端で繰り返されています。これを修正するには、CSS を使用した解決策を検討してみましょう。

Background-Size プロパティの使用

background-size プロパティを使用すると、背景画像のサイズを指定できます。 。カバーに設定すると、画像がページ全体を埋めるように引き伸ばされ、完全にカバーされます。

body {
    background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png') cover;
}

追加のスタイルを使用した例

最新のブラウザでは、次の CSS を使用して、固定位置で全画面対応の背景画像を作成できます:

background: url(image.jpg) fixed 50% / cover;

この省略表記目的の効果を実現するために、background-image、background-attachment、background-position、background-size の各プロパティを組み合わせます。

レスポンシブ背景画像の短縮構文

の場合CSS3 をサポートするブラウザでは、次の短縮構文を使用できます:

background: url(image.jpg) fixed center / cover;

この構文画像を背景として設定し、所定の位置に固定し、中央に配置して、ページ全体を確実にカバーします。

Safari ブラウザーに関する注意

価値がありますSafari には、background-size を指定するための / 短縮表現に関する既知の問題があることに注意してください。このバグを回避するには、代わりに次の構文を使用します。

background: url(image.jpg) fixed 50%;
background-size: cover;

これらの CSS テクニックを組み込むことで、ユーザー エクスペリエンスを向上させ、Web ページを目立たせる、魅力的なフルスクリーンのレスポンシブ背景画像を作成できます。

以上がCSS を使用して全画面対応の背景画像を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。