HTMLの「」と「背景」を効果的に使うには？

の背景を利用する方法および/または

このガイドでは、HTML ドキュメントに背景を適用するときのさまざまなシナリオに対処し、特定の動作が発生する理由を明確にし、目的の背景効果を実現するための解決策を提供します。

背景を < に適用する;html>

で背景プロパティを設定する場合には違いがあることに注意することが重要です。そして

標準モードの要素。

• 背景を に適用する場合: 背景は、< の実際のサイズに関係なく、ページの表示部分全体を占めます。 ;本体>
• 背景を に適用する場合: 背景は が占める領域のみをカバーします。 要素にデフォルトのマージンが適用されるため、多くの場合、この要素は表示領域よりも大きくなります。要素。このような場合、要素の背景色は を通して「にじみ」ます。

背景の重ね合わせ

半透明の画像オーバーレイを使用して背景色のような効果を実現するには、別の を使用する必要はありません。そして

要素。代わりに、background-color プロパティとbackground-image プロパティを組み合わせて使用​​します。

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

複数の背景画像の結合

複数の背景画像を結合するには、CSS2 テクニックを利用するか、CSS3 を利用できます。機能拡張:

• 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;
}

提供フォールバック

古いブラウザをサポートすることが目標の場合は、IE7 までサポートされている CSS2 メソッドを利用して複数の背景を適用します。 CSS3 の複数レイヤーの背景構文では、最下層のレイヤーのみが背景色を持つ場合があることに注意してください。

以上がHTMLの「」と「背景」を効果的に使うには？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。