Comment créer des arrière-plans d'images dynamiques avec des attributs de données HTML et des variables CSS ?

Arrière-plans d'images dynamiques utilisant des attributs de données HTML et CSS

Problème :

Supposons que vous' vous créez une galerie de photos personnalisée et utilisez les attributs de données HTML pour stocker les URL des images. Vous souhaitez attribuer ces URL à la propriété background-image des éléments div représentant des vignettes.

Code HTML :

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

Code CSS (partie douteuse ):

.thumb {
    background-image: attr(data-image-src);
}

L'objectif est d'extraire la valeur data-image-src de chaque pouce div et définissez-la comme image d'arrière-plan pour ce div dans le fichier CSS.

Solution :

L'utilisation de variables CSS vous permet d'y parvenir sans jQuery ou spécifique au navigateur des hacks. Notez que les variables CSS ne sont pas prises en charge dans Internet Explorer.

Code HTML mis à jour :

<div class="thumb">

Code CSS mis à jour :

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

Codepen Démo :

https://codepen.io/bruce13/pen/bJdoZW

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!