kzen.dev
Détails
Question

Comment définir la couleur d'arrière-plan d'un texte ciblé, en utilisant uniquement le CSS ?

Question

Comment ajouter dynamiquement un fond vert derrière le texte, pas sur toute la largeur de la page, juste sur le texte.

Problème

Avec mon code actuel, le vert s'étend à toute la page. Je ne suis pas en mesure de modifier le HTML ou le Javascript, seulement le fichier CSS.

![Entrez la description de l'image ici][1]

[1] : http://i.stack.imgur.com/0fpuS.png

HTML

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

CSS

h1 { 
    text-align: center; 
    background-color: green; 
}
JGallardo
JGallardo
Question modifiée 29 mars 2018 в 5:02
Programmation
html
css
Cette question a 1 réponse en anglais, pour les lire connectez-vous à votre compte.
Solution / Réponse

Placez le texte dans un [élément en ligne][1], tel qu'un <span>.

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

Et ensuite appliquer la couleur de fond sur l'élément en ligne.

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

Un élément inline est aussi grand que son contenu, ce qui devrait suffire.

[1] : http://www.htmlhelp.com/reference/html40/inline.html

149

Une astuce très simple consiste à ajouter une balise <span> et à lui ajouter une couleur de fond. Vous obtiendrez ainsi l'aspect que vous souhaitez.

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

Et CSS

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

WHY?

<span> dans une balise d'élément en ligne, de sorte qu'il ne s'étendra que sur le contenu en simulant l'effet.

8

Essayez de supprimer l'alignement du texte au centre et de centrer le " h1 " ou le " div " dans lequel le texte se trouve.

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
JGallardo
JGallardo
Réponse modifiée 7 septembre 2017 в 8:15
2