Wie legt man die CSS-Hintergrundbild-URL mithilfe von HTML-Datenattributen dynamisch fest?

CSS-Hintergrundbild-URL mithilfe von HTML-Datenattributen festlegen

Das Erstellen einer benutzerdefinierten Fotogalerie erfordert eine sorgfältige Berücksichtigung der HTML-Struktur und von CSS. Um die CSS-Hintergrundbild-URL dynamisch basierend auf HTML-Datenattributen zu bestimmen, können wir CSS-Variablen nutzen.

HTML-Thumb-Format

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

CSS mit CSS-Variablen

.thumb {
    --background: url(attr(data-image-src)); /* Store URL in CSS variable */
    
    background-image: var(--background); /* Use CSS variable for background image */
}

Bei diesem Ansatz ist der data-image-src aus dem div.thumb in einer CSS-Variablen gespeichert. Anschließend verweist die Eigenschaft „Hintergrundbild“ auf die CSS-Variable, um die URL des Hintergrundbilds dynamisch festzulegen.

Browserunterstützung
CSS-Variablen werden im Internet Explorer nicht unterstützt, was einen alternativen Ansatz erfordert. Für IE-Kompatibilität wird eine Lösung mit CSS-Präprozessoren oder JavaScript empfohlen.

Codebeispiel

<div class="thumb">

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

Ein CodePen-Beispiel, das diese Technik demonstriert, finden Sie hier : https://codepen.io/bruce13/pen/bJdoZW

Das obige ist der detaillierte Inhalt vonWie legt man die CSS-Hintergrundbild-URL mithilfe von HTML-Datenattributen dynamisch fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!