Comment créer un arrière-plan de largeur de texte en CSS sans affecter l'ensemble de l'élément ?

Créer des arrière-plans de largeur de texte en CSS sans couleur à l'échelle de l'élément

Obtenir un arrière-plan de largeur de texte sans l'étendre à l'ensemble de l'élément peut présenter un défi en CSS. Voici comment le résoudre :

Isoler le texte dans un élément en ligne

Comme vous ne pouvez pas modifier le code HTML, votre solution consiste à confiner le texte dans un élément en ligne. élément, comme un . Ce faisant, vous limitez la portée de la couleur d'arrière-plan au texte lui-même.

Appliquer la couleur d'arrière-plan à l'élément en ligne

Une fois le texte isolé dans le < span>, vous pouvez facilement appliquer la couleur d’arrière-plan à l’élément en ligne. Cela garantit que la couleur reste confinée aux limites du texte.

Exemple de mise en œuvre

Pour illustrer cette technique, considérons le code révisé suivant :

HTML :

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

CSS :

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

En enveloppant le texte dans un et en appliquant la couleur d'arrière-plan à l'étendue, vous réussissez à créer un arrière-plan de la largeur du texte sans modifier la largeur de l'élément principal.

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!