HTML と Body 要素の背景は CSS でどのように相互作用しますか?また、全画面の背景を実現するにはどうすればよいですか?

ページへの背景の適用

HTML および CSS を使用する場合、ページに背景を適用すると予期しない結果が生じる可能性があります。デフォルトでは、本文コンテンツの実際のサイズに関係なく、本文要素に適用される背景はページ全体をカバーするように拡張されます。ただし、背景が HTML 要素にも適用される場合、この動作は変わります。

期待される動作

標準モードでは、HTML 要素と body 要素の両方が最初は必要ありません。ビューポート全体の高さを上げます。 HTML 要素に背景が適用されていない場合は、本文から背景を継承します。ただし、背景が HTML 要素に適用されると、このメカニズムは壊れ、両方の要素の背景は定義された領域を尊重します。

背景の結合

へ2 つのフルスクリーン背景 (背景色と半透明の画像など) を重ね合わせると、本文または HTML 要素を 1 つの要素として使用できます。 container.

単一要素のアプローチ:

背景の短縮プロパティを使用して、1 つの要素内で背景色と背景画像を結合します:

body {
    background: #ddd url(background.png) center top no-repeat;
}

複数要素のアプローチ(CSS2):

1. HTML 要素に背景画像を設定します。
2. 必要な高さとカバーする最小高さを備えた body 要素に透明な背景画像を設定します。ビューポート。

html {
    height: 100%;
    background: #ddd url(background1.png) repeat;
}

body {
    min-height: 100%;
    background: transparent url(background2.png) center top no-repeat;
}

複数要素アプローチ(CSS3):

1 つの要素内の単一のプロパティとして複数の背景値を宣言します:

body {
    background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat;
}

ブラウザーのサポート

背景伝播メカニズムは、単一要素アプローチと複数要素アプローチの両方に適用されます。ただし、古いブラウザとの互換性を確保するには、IE7 以降でサポートされている CSS2 メソッドを使用することをお勧めします。

以上がHTML と Body 要素の背景は CSS でどのように相互作用しますか?また、全画面の背景を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。