Wie erstelle ich dynamische Bildhintergründe mit HTML-Datenattributen und CSS-Variablen?

Dynamische Bildhintergründe mit HTML-Datenattributen und CSS

Problem:

Angenommen, Sie Sie erstellen eine benutzerdefinierte Fotogalerie und verwenden HTML-Datenattribute zum Speichern von Bild-URLs. Sie möchten diese URLs der Eigenschaft „Hintergrundbild“ von div-Elementen zuweisen, die Miniaturansichten darstellen.

HTML-Code:

<div class="thumb" data-image-src="images/img.jpg"></div>

CSS-Code (fragwürdiger Teil). ):

.thumb {
    background-image: attr(data-image-src);
}

Das Ziel besteht darin, den data-image-src-Wert aus jedem Thumb-Div zu extrahieren und ihn als Hintergrundbild für dieses Div in der CSS-Datei festzulegen.

Lösung:

Durch die Verwendung von CSS-Variablen können Sie dies ohne jQuery oder browserspezifische Hacks erreichen. Beachten Sie, dass CSS-Variablen im Internet Explorer nicht unterstützt werden.

Aktualisierter HTML-Code:

<div class="thumb">

Aktualisierter CSS-Code:

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

Codepen-Demo:

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich dynamische Bildhintergründe mit HTML-Datenattributen und CSS-Variablen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!