HTML と CSS の本文の背景: フルスクリーンの背景をどこに適用する必要がありますか?

の CSS 背景vs : 2 つのビューポートの物語

CSS 背景を のいずれかに適用する場合。または

要素によって、微妙ではあるが重要な違いが生じます。 に割り当てられた背景。本文の実際のサイズに関係なく、ページ全体に広がります。逆に、 の両方に適用すると、 、 の背景。

不一致の理由

この動作は、

が要素の寸法に制限されているという事実に起因します。標準モードでは本質的にビューポートの高さ全体を占めるわけではありません。代わりに、その背景は から継承します。

フルスクリーン背景の重ね合わせ

ここで、背景色と画像オーバーレイの 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;
}

考慮事項

• CSS3 では、複数レイヤーの背景の最下位レイヤーのみが背景色を持つことができます。
• 注目された動作は、マルチレイヤーの背景でも適用されます。
• 古いブラウザーとの互換性については、CSS2 の使用を検討してください。

この動作は、

に HTML 背景属性を設定し、背景がビューポートを超えてしまうという以前の HTML の実践に由来していることに注意してください。

以上がHTML と CSS の本文の背景: フルスクリーンの背景をどこに適用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。