HTML の `` と `` の背景はどのように異なり、複数の背景を効果的に使用するにはどうすればよいですか?

に背景を適用するおよび/または

背景を に適用する場合または

要素を考慮すると、動作の矛盾に気づくかもしれません。 に背景を設定した場合 要素の場合、ページ全体が含まれます。要素の背景は、コンテンツが表示される領域に制限されます。

なぜ矛盾があるのですか?

標準モードでは、そして

要素は本質的にビューポートの高さを満たしません。ただし、要素は を採用します。明示的に定義されていない場合は、要素の背景色。その後、この継承された背景がキャンバスの背景となり、ビューポート全体をカバーします。

複数の背景の重ね合わせ

背景の重ね合わせ効果を実現するには、単一の要素で 2 つの背景プロパティを組み合わせます (例:

)。本文>）を推奨します。背景画像と背景色のプロパティ、または背景の省略表現プロパティを使用すると、シームレスに結合できます。

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

たとえば、透明な背景画像を単色の背景色に重ね合わせるには、次のコマンドを使用します。

複数の背景の使用

複数の背景画像を組み合わせるには、次の点を考慮してください。メソッド:

CSS2:

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

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

の両方に異なる背景画像を設定します。そして要素、 を確保します。要素の高さと最小の高さが設定されます:

CSS3:

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

単一のプロパティで複数の背景構文を使用します:

以上がHTML の `` と `` の背景はどのように異なり、複数の背景を効果的に使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。