CSS で全画面対応の背景画像を作成するには?

CSS を使用して全画面対応の背景画像を実現する

Web ページの全画面背景として画像を設定する過程で、画像という問題が発生しました。ページを完全にはカバーせず、右端で繰り返します。 CSS テクニックを使用してこれを解決する方法は次のとおりです。

解決策 1: Cover メソッド

background-size プロパティを使用して、背景画像のサイズを制御できます。この場合、値 cover を使用すると、画像が収まるように拡大またはトリミングする必要がある場合でも、画像がページ全体を確実にカバーします。

background-size: cover;

画像が水平方向と垂直方向の両方で中央に配置されるようにするには、次のようにします。値 50% 50% を指定して、background-position プロパティを使用できます:

background-position: 50% 50%;

解決策 2: 修正済みAttachment

背景画像がページのコンテンツと一緒にスクロールしないようにするには、background-attachment プロパティを fix に設定します。これにより、画像が所定の位置に固定され、ページが画像の後ろにスクロールできるようになります。

background-attachment: fixed;

短縮構文

次の構文を使用して、両方のソリューションの短縮バージョンを作成できます。

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

ここで、/ は、background-position プロパティとbackground-size プロパティを区切ります。

Safari互換性

Safari には上記の短縮構文にバグがあることに注意してください。 Safari で使用するには、次のようにプロパティを分離する必要があります:

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

これらのテクニックを実装すると、背景画像がページを完全に覆い、中央に配置されたままになり、視覚的に魅力的で応答性の高い背景が提供されます。ウェブサイト。

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