Comment définir dynamiquement des images d'arrière-plan CSS à l'aide d'attributs de données ?

Attributs de données HTML : définition dynamique des images d'arrière-plan CSS

L'objectif est de définir dynamiquement l'image d'arrière-plan des éléments en fonction d'un attribut de données en HTML, en utilisant spécifiquement les éléments .thumb pour afficher les miniatures.

Dans la structure HTML, chaque div miniature a un Attribut data-image-src qui spécifie l'URL de l'image :

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

Au départ, l'attente était de définir l'image d'arrière-plan CSS à l'aide de la fonction attr :

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

Cependant, cette approche n’a pas fonctionné. Comme solution alternative, des Variables CSS sont introduites.

Utilisation de variables CSS

Les variables CSS vous permettent de déclarer une variable et de l'utiliser dans votre styles :

<div class="thumb">

Dans le HTML ci-dessus, la variable --background est définie en utilisant le style

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

Dans le CSS, la propriété background-image fait désormais référence à la variable --background. Cela garantit que chaque élément .thumb utilise l'URL spécifiée dans son attribut data-image-src correspondant comme image d'arrière-plan.

Exemple Codepen

Un exemple dynamique de ceci L'approche peut être trouvée sur :

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!