Wie interagieren HTML- und Body-Element-Hintergründe in CSS und wie kann ich Vollbild-Hintergründe erzielen?

Hintergründe auf die Seite anwenden

Beim Arbeiten mit HTML und CSS kann das Anwenden von Hintergründen auf die Seite zu unerwarteten Ergebnissen führen. Standardmäßig erstrecken sich auf das Textelement angewendete Hintergründe über die gesamte Seite, unabhängig von der tatsächlichen Größe des Textinhalts. Dieses Verhalten ändert sich jedoch, wenn auch ein Hintergrund auf das HTML-Element angewendet wird.

Erwartetes Verhalten

Im Standardmodus werden sowohl das HTML- als auch das Body-Element zunächst nicht verwendet über die gesamte Höhe des Ansichtsfensters. Wenn auf das HTML-Element kein Hintergrund angewendet wird, erbt es den Hintergrund vom Textkörper. Sobald jedoch ein Hintergrund auf das HTML-Element angewendet wird, wird dieser Mechanismus unterbrochen und die Hintergründe für beide Elemente respektieren ihre definierten Bereiche.

Hintergründe kombinieren

Zu Wenn Sie zwei Vollbildhintergründe überlagern möchten (z. B. eine Hintergrundfarbe und ein halbtransparentes Bild), können Sie entweder das Body- oder das HTML-Element einzeln verwenden Container.

Einzelelement-Ansatz:

Verwenden Sie die Kurzschrifteigenschaft „Hintergrund“, um Hintergrundfarbe und Hintergrundbild innerhalb eines Elements zu kombinieren:

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

Multiple-Elemente-Ansatz (CSS2):

1. Legen Sie ein Hintergrundbild fest HTML-Element.
2. Legen Sie ein transparentes Hintergrundbild für das Körperelement mit der gewünschten Höhe und Mindesthöhe fest, um das Ansichtsfenster abzudecken.

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

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

Ansatz mit mehreren Elementen ( CSS3):

Deklarieren Sie mehrere Hintergrundwerte als eine einzelne Eigenschaft innerhalb einer Element:

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

Browser-Unterstützung

Der Hintergrundausbreitungsmechanismus gilt sowohl für Einzel- als auch für Mehrfachelement-Ansätze. Für die Kompatibilität mit älteren Browsern wird jedoch empfohlen, die CSS2-Methode zu verwenden, die ab IE7 unterstützt wird.

Das obige ist der detaillierte Inhalt vonWie interagieren HTML- und Body-Element-Hintergründe in CSS und wie kann ich Vollbild-Hintergründe erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!