HTML の `` および `` 要素に背景を効果的に重ねるにはどうすればよいですか?

に背景を適用するおよび

HTML レイアウトでは、両方の に背景を適用します。そして

要素によって予期しない結果が生じる可能性があります。この記事では、予想される動作を検証し、複数の背景を重ね合わせるための解決策を提供します。

標準モードでの背景の伝播:

標準モードでは、は、背景があるように見える場合でも、自動的にビューポートの高さを占めません。 に背景が設定されていない場合は、 から背景を継承します。ただし、 の背景を明示的に指定すると、その背景は を含むキャンバス全体をカバーするように拡張されます。

単一要素の重ね合わせ:

などの単一要素の背景色の上に 2 つの背景画像を重ね合わせるにはまたは では、background または background-color プロパティを使用できます。例:

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

複数の要素に背景画像を重ね合わせる:

複数の要素を使用して複数の背景画像を組み合わせるには、。たとえば、背景画像を に設定します。もう 1 つは です。それをオーバーレイすることを目的としています。 を確認してください。そして

CSS3 の複数レイヤーの背景:

CSS3 では、単一のプロパティで複数の背景値を宣言でき、複数の要素が必要です。例:

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

複数レイヤーの背景の最下位レイヤーのみが背景色を持つことができることに注意してください。

古いブラウザのサポート:

CSS3 より古いブラウザの場合、背景を重ね合わせるには複数要素の方法を使用する必要があります。 を確認してください。そして

正しい高さと余白を持ってください。

以上がHTML の `` および `` 要素に背景を効果的に重ねるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。