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!