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

Définition de l'URL de l'image d'arrière-plan CSS à l'aide des attributs de données HTML

La création d'une galerie de photos personnalisée nécessite un examen attentif de la structure HTML et du CSS. Pour déterminer dynamiquement l'URL de l'image d'arrière-plan CSS en fonction de l'attribut de données HTML, nous pouvons exploiter les variables CSS.

Format HTML Thumb

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

CSS avec des variables CSS

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

Avec cette approche, le data-image-src du div.thumb est stocké dans une variable CSS. Par la suite, la propriété background-image fait référence à la variable CSS pour définir dynamiquement l'URL de l'image d'arrière-plan.

Prise en charge du navigateur
Les variables CSS ne sont pas prises en charge dans Internet Explorer, ce qui nécessite une approche alternative. Pour la compatibilité avec IE, une solution utilisant des préprocesseurs CSS ou JavaScript est recommandée.

Exemple de code

<div class="thumb">

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

Un exemple CodePen illustrant cette technique peut être trouvé ici : 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!