Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Mary-Kate Olsen
Freigeben: 2024-11-09 17:31:02
Original
340 Leute haben es durchsucht

How to create dynamic image backgrounds with HTML data attributes and CSS variables?

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>
Nach dem Login kopieren

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

.thumb {
    background-image: attr(data-image-src);
}
Nach dem Login kopieren

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">
Nach dem Login kopieren

Aktualisierter CSS-Code:

.thumb {
    background-image: var(--background);
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!