Wie kann ich Hintergrundbilder mit CSS ohne JavaScript dynamisch festlegen?

Verwenden von CSS-Variablen zum dynamischen Zuweisen von Hintergrundbildern aus HTML-Datenattributen

Frage:

Wie kann CSS verwendet werden? Legen Sie automatisch das Hintergrundbild von Elementen basierend auf den in HTML-Datenattributen gespeicherten Werten fest, ohne sich darauf verlassen zu müssen JavaScript?

Antwort:

CSS-Variablen bieten eine Lösung für dieses Problem. CSS-Variablen ermöglichen die dynamische Anpassung von Stilen basierend auf in HTML-Elementen definierten Werten. Hier ist ein Beispiel:

HTML:

<div class="thumb">

CSS:

.thumb {
    background-image: var(--background);
}

Erklärung:

Im HTML-Code wird das style-Attribut verwendet, um eine CSS-Variable mit dem Namen zu definieren --background und weisen Sie ihm die URL des gewünschten Hintergrundbilds zu. Im CSS-Code bezieht sich die Eigenschaft „Hintergrundbild“ hinsichtlich ihres Werts auf die Variable „--background“.

Wenn die Seite geladen wird, analysiert der Browser sowohl den HTML- als auch den CSS-Code. Es erkennt die im HTML definierte CSS-Variable und wendet ihren Wert auf die Eigenschaft „Hintergrundbild“ von Elementen mit der Klasse .thumb an.

Codepen Demo:

https://codepen.io/bruce13/pen/bJdoZW

Hinweis:

CSS-Variablen werden in nicht unterstützt Internet Explorer. Wenn die Unterstützung von IE erforderlich ist, sind möglicherweise alternative Ansätze erforderlich.

Das obige ist der detaillierte Inhalt vonWie kann ich Hintergrundbilder mit CSS ohne JavaScript dynamisch festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!