Comment puis-je utiliser un attribut de données pour définir une image d'arrière-plan CSS ?

Image d'arrière-plan CSS à partir de l'attribut data-image

En HTML, les éléments ont souvent des attributs de données utilisés pour stocker des informations supplémentaires. La définition d'une image d'arrière-plan sur la valeur d'un attribut de données peut être obtenue uniquement via CSS.

Le problème

Le code CSS fourni :

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

ne parvient pas à afficher l'image d'arrière-plan.

La solution : personnalisée Propriétés

Une approche alternative consiste à utiliser des propriétés personnalisées CSS, qui permettent de définir tout type de valeur, y compris les URL.

.kitten {
  background-image: var(--bg-image);
}

Ensuite, définissez la propriété personnalisée dans le style de l'élément. attribut :

<div class="kitten"><p>Cette approche permet des mises à jour dynamiques de l'image d'arrière-plan via des modifications CSS ou des interactions de script.</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!