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

Définition de l'image d'arrière-plan à l'aide de l'attribut CSS Data-Image

CSS fournit la propriété background-image pour définir l'image d'arrière-plan d'un élément. Cependant, il peut s'avérer fastidieux de définir l'image d'arrière-plan à l'aide du code HTML en ligne. Pour résoudre ce problème, une technique CSS consiste à utiliser la fonction attr() et l'attribut data-image.

Description du problème

Un développeur souhaite appliquer des images d'arrière-plan aux éléments. en fonction de la valeur stockée dans l'attribut data-image. Ils ont d'abord tenté le code CSS suivant :

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

Cependant, ce code n'a pas correctement défini l'image d'arrière-plan.

Solution utilisant des propriétés personnalisées

Au lieu d'utiliser attr() et data-image, une approche alternative consiste à utiliser des propriétés personnalisées (également appelées variables CSS). Les propriétés personnalisées offrent plus de flexibilité et permettent des mises à jour programmatiques.

Exemple

En utilisant les propriétés personnalisées, vous pouvez obtenir la fonctionnalité souhaitée comme suit :

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div class="kitten"><p>Dans cet exemple, la propriété personnalisée --bg-image est définie à l'aide de l'attribut de style en ligne, spécifiant l'URL de l'image d'arrière-plan souhaitée. La classe .kitten fait référence à cette propriété personnalisée pour appliquer l'image comme arrière-plan.</p></div>

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!