Wie unterscheiden sich HTML- und HTML-Hintergründe und wie kann ich mehrere Hintergründe effektiv nutzen?

Anwenden eines Hintergrunds auf und/oder

Beim Anwenden eines Hintergrunds auf das oder

Elemente, könnte man eine Diskrepanz im Verhalten bemerken. Mit einem Hintergrundsatz auf dem Element umfasst es die gesamte Seite, während das Der Hintergrund des Elements ist auf den Bereich beschränkt, in dem der Inhalt angezeigt wird.

Warum die Diskrepanz?

Im Standardmodus ist das und

Elemente füllen grundsätzlich nicht die Höhe des Ansichtsfensters aus. Allerdings ist das Das Element übernimmt den Hintergrundfarbe des Elements, sofern nicht explizit definiert. Anschließend wird dieser übernommene Hintergrund zum Leinwandhintergrund, der das gesamte Ansichtsfenster abdeckt.

Mehrere Hintergründe überlagern

Um einen überlagerten Hintergrundeffekt zu erzielen, kombinieren Sie zwei Hintergrundeigenschaften in einem einzigen Element (z. B. ) wird empfohlen. Die Verwendung der Eigenschaften „Hintergrundbild“ und „Hintergrundfarbe“ oder die Abkürzung „Hintergrund“ ermöglicht eine nahtlose Zusammenführung.

Um beispielsweise ein transparentes Hintergrundbild über eine einfarbige Hintergrundfarbe zu legen, verwenden Sie Folgendes:

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

Mehrere Hintergründe verwenden

Um mehrere Hintergrundbilder zu kombinieren, beachten Sie Folgendes Methoden:

CSS2:

Stellen Sie unterschiedliche Hintergrundbilder sowohl für die und

Elemente, die sicherstellen, dass der Höhe und Mindesthöhe des Elements werden festgelegt:

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

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

CSS3:

Verwenden Sie die Syntax für mehrere Hintergründe in einer einzelnen Eigenschaft:

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

Das obige ist der detaillierte Inhalt vonWie unterscheiden sich HTML- und HTML-Hintergründe und wie kann ich mehrere Hintergründe effektiv nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!