HTML-Datenattribute: CSS-Hintergrundbilder dynamisch festlegen
Das Ziel besteht darin, das Hintergrundbild für Elemente basierend auf einem Datenattribut dynamisch festzulegen in HTML, insbesondere unter Verwendung von .thumb-Elementen zum Anzeigen von Miniaturansichten.
In der HTML-Struktur verfügt jedes Miniaturansicht-Div über eine data-image-src Attribut, das die URL des Bildes angibt:
<div class="thumb" data-image-src="images/img.jpg"></div>
Anfänglich bestand die Erwartung darin, das CSS-Hintergrundbild mithilfe der attr-Funktion festzulegen:
.thumb {
background-image: attr(data-image-src);
}Dieser Ansatz funktionierte jedoch nicht . Als alternative Lösung werden CSS-Variablen eingeführt.
CSS-Variablen verwenden
Mit CSS-Variablen können Sie eine Variable deklarieren und in Ihrem verwenden Stile:
<div class="thumb">
Im obigen HTML wird die Variable --background mithilfe des Stils festgelegt Attribut.
.thumb {
background-image: var(--background);
}Im CSS verweist die Eigenschaft „Hintergrundbild“ jetzt auf die Variable „--background“. Dadurch wird sichergestellt, dass jedes .thumb-Element die im entsprechenden data-image-src-Attribut angegebene URL als Hintergrundbild verwendet.
Codepen-Beispiel
Ein dynamisches Beispiel hierfür Ansatz finden Sie unter:
https://codepen.io/bruce13/pen/bJdoZW
Das obige ist der detaillierte Inhalt vonWie lege ich CSS-Hintergrundbilder mithilfe von Datenattributen dynamisch fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
