Comment puis-je définir dynamiquement des images d'arrière-plan à l'aide de CSS sans JavaScript ?

Utilisation de variables CSS pour attribuer dynamiquement des images d'arrière-plan à partir d'attributs de données HTML

Question :

Comment CSS peut-il être utilisé pour définir automatiquement l'image d'arrière-plan des éléments en fonction des valeurs stockées dans les attributs de données HTML, sans recourir à JavaScript ?

Réponse :

Les variables CSS fournissent une solution à ce problème. Les variables CSS permettent de personnaliser dynamiquement les styles en fonction des valeurs définies dans les éléments HTML. Voici un exemple :

HTML :

<div class="thumb">

CSS :

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

Explication :

Dans le code HTML, l'attribut style permet de définir une variable CSS nommée --background et de lui attribuer l'URL de l'image de fond souhaitée. Dans le code CSS, la propriété background-image fait référence à la variable --background pour sa valeur.

Lorsque la page se charge, le navigateur analyse à la fois le code HTML et CSS. Il reconnaît la variable CSS définie dans le HTML et applique sa valeur à la propriété background-image des éléments avec la classe .thumb.

Démo Codepen :

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

Remarque :

Les variables CSS ne sont pas prises en charge dans Internet Explorer. Si la prise en charge d'IE est nécessaire, des approches alternatives peuvent être nécessaires.

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!