Wie lege ich CSS-Hintergrundbilder mithilfe von Datenattributen dynamisch fest?

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!