HTML vs. Body-Hintergründe in CSS: Wo soll ich meinen Vollbild-Hintergrund anwenden?

CSS-Hintergrund zu vs : Eine Geschichte von zwei Ansichtsfenstern

Beim Anwenden eines CSS-Hintergrunds auf das oder

Element entsteht ein subtiler, aber dennoch bedeutsamer Unterschied. Ein Hintergrund, der erstreckt sich über die gesamte Seite, unabhängig von der tatsächlichen Größe des Textes. Umgekehrt, wenn es sowohl auf und , der Hintergrund für bleibt auf die Dimensionen des Elements beschränkt.

Grund für die Diskrepanz

Dieses Verhalten ergibt sich aus der Tatsache, dass

nimmt im Standardmodus grundsätzlich nicht die gesamte Höhe des Ansichtsfensters ein. Stattdessen erbt sein Hintergrund vom Element, wenn es nicht angegeben wird, und es über die gesamte Leinwand ausdehnt.

Vollbildhintergründe überlagern

Wenn Sie nun zwei Vollbildhintergründe kombinieren möchten, sei es eine Hintergrundfarbe oder eine Bildüberlagerung, klicken Sie hier sind Ihre Optionen:

Hintergründe auf einem einzelnen Element kombinieren

Hintergrund verwenden Kurzschrift:

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

Kombinieren von Hintergründen auf mehreren Elementen

CSS2-Ansatz:

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

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

CSS3 Ansatz:

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

Überlegungen

• In CSS3 kann nur die unterste Ebene eines mehrschichtigen Hintergrunds eine Hintergrundfarbe haben.
• Die Das angegebene Verhalten gilt auch bei mehrschichtigen Hintergründen.
• Für die Kompatibilität mit älteren Browsern sollten Sie die Verwendung von CSS2 in Betracht ziehen Ansatz.

Denken Sie daran, dass dieses Verhalten auf die frühere HTML-Praxis zurückzuführen ist, bei der das HTML-Hintergrundattribut auf

festgelegt wurde, was dazu führte, dass sich der Hintergrund über das Ansichtsfenster erstreckte.

Das obige ist der detaillierte Inhalt vonHTML vs. Body-Hintergründe in CSS: Wo soll ich meinen Vollbild-Hintergrund anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!