Wie überlagere ich HTML-Elemente „' und „' effektiv mit Hintergründen?

Anwenden von Hintergründen auf und

In HTML-Layouts ist das Anwenden eines Hintergrunds auf beide und Elemente können zu unerwarteten Ergebnissen führen. Dieser Artikel untersucht das erwartete Verhalten und bietet Lösungen für die Überlagerung mehrerer Hintergründe.

Hintergrundausbreitung im Standardmodus:

Im Standardmodus ist nimmt nicht automatisch die Höhe des Ansichtsfensters ein, auch wenn es bei einem Hintergrund so aussieht. Wenn für kein Hintergrund festgelegt ist, erbt es den Hintergrund von . Wenn Sie jedoch explizit einen Hintergrund für angeben, erstreckt sich dieser Hintergrund über die gesamte Leinwand, einschließlich .

Überlagerung einzelner Elemente:

Um zwei Hintergrundbilder über eine Hintergrundfarbe auf einem einzelnen Element zu legen, z. B. oder können Sie die Eigenschaften „background“ oder „background-color“ verwenden. Zum Beispiel:

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

Hintergrundbilder auf mehreren Elementen überlagern:

Um mehrere Hintergrundbilder mit mehreren Elementen zu kombinieren, können Sie unterschiedliche Hintergrundeinstellungen auf . Legen Sie beispielsweise ein Hintergrundbild auf fest. und ein weiteres zu das soll es überlagern. Stellen Sie sicher, dass und haben die richtige Größe für die volle Bildschirmhöhe.

Mehrschichtige Hintergründe in CSS3:

In CSS3 können Sie mehrere Hintergrundwerte in einer einzigen Eigenschaft deklarieren, wodurch das eliminiert wird Bedarf an mehreren Elementen. Zum Beispiel:

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

Beachten Sie, dass nur die unterste Ebene in einem mehrschichtigen Hintergrund eine Hintergrundfarbe haben kann.

Unterstützung für ältere Browser:

Für Browser, die älter als CSS3 sind, müssen Sie die Methode mit mehreren Elementen verwenden, um Hintergründe einzublenden. Stellen Sie sicher, dass und haben die richtigen Höhen und Ränder.

Das obige ist der detaillierte Inhalt vonWie überlagere ich HTML-Elemente „' und „' effektiv mit Hintergründen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!