web-dev-qa-db-fra.com

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

Question

Comment puis-je ajouter dynamiquement un arrière-plan vert derrière le texte, pas toute la largeur de la page, mais uniquement le texte.

Problème

Le vert s'étend à la page entière avec mon code actuel. Je ne suis pas en mesure de modifier le code HTML ou Javascript, uniquement le fichier CSS.

enter image description here

HTML

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

CSS

h1 { 
    text-align: center; 
    background-color: green; 
}
htmlcss
102
Hithere Paperbag

Placez le texte dans un élément inline , tel que <span>.

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

Et appliquez ensuite la couleur d'arrière-plan sur l'élément en ligne.

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

Un élément en ligne est aussi gros que son contenu, il devrait donc le faire pour vous.

131
BalusC

Un peu tard pour le jeu mais j'ai pensé ajouter mes 2 centimes ...

Pour éviter d'ajouter le balisage supplémentaire d'une étendue interne, vous pouvez modifier la propriété d'affichage <h1> de block à inline (vous devez vous assurer que les éléments après le <h1> sont des éléments de bloc.

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

CSS

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

Résultat
enter image description here
JSFIDDLE http://jsfiddle.net/J7VBV/

44
Dan

Option 1

display: table;

  • aucun parent requis

h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<h1>The Last Will and Testament of Eric Jones</h1>

violon

http://jsfiddle.net/J7VBV/293/

plus

display: table indique à l'élément de se comporter comme un tableau HTML normal.

Plus à ce sujet à w3schools , astuces CSS et ici

Option 2

display: inline-flex;

  • nécessite text-align: center; sur le parent

.container {
    text-align: center; /* center the child */
}
h1 {
    display: inline-flex; /* keep the background color wrapped tight */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

Option 3

display: flex;

  • nécessite un conteneur parent flexible

.container {
  display: flex;
  justify-content: center; /* center the child */
}
h1 {
    display: flex;
    /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>

sur

Le guide le plus populaire de Flexbox, auquel je fais constamment référence, est le suivant: astuces CSS

Option 4

display: block;

  • nécessite un conteneur parent flexible

.container {
  display: flex;
  justify-content: center; /* centers child */
}
h1 {
    display: block;
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

Option 5

::before

  • nécessite la saisie de mots dans un fichier css (pas très pratique)

h1 {
    display: flex; /* set a flex box */
    justify-content: center; /* so you can center the content like this */
}

h1::before {
    content:'The Last Will and Testament of Eric Jones'; /* the content */
    padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}
<h1></h1>

violon

http://jsfiddle.net/J7VBV/457/

sur

En savoir plus sur les pseudo-éléments css :: before et :: after at CSS Astuces et des pseudo-éléments en général sur w3schools

Option 6

display: inline-block;

  • centrer avec position: absolute et translateX

  • nécessite un parent position: relative

.container {
  position: relative; /* required for absolute positioned child */
}
h1 {
  display: inline-block; /* keeps container wrapped tight to content */
  position: absolute; /* to absolutely position element */
  top: 0;
  left: 50%; /* part1 of centering with translateX/Y */
  transform: translateX(-50%); /* part2 of centering with translateX/Y */
  white-space: nowrap; /* text lines will collapse without this */
  padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
  <h1>The Last Will and Testament of Eric Jones</h1>

sur

Plus d'informations sur le centrage avec transform: translate(); (et le centrage en général) dans cet article sur les astuces CSS

Option 7

text-shadow: ET box-shadow:

  • pas ce que le PO cherchait, mais peut-être utile pour les autres qui y trouvent leur chemin.

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
    text-shadow: 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green;
}
h2 {
    text-shadow: -5px -5px 5px green,-5px 5px 5px green,
                  5px -5px 5px green,5px 5px 5px green;
}
h3 {
    color: hsla(0, 0%, 100%, 0.8);
    text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
    text-shadow: 0px 0px 35px green,0px 0px 35px green,
                 0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
  box-shadow: inset 0px 0px 0px 1000px green;
}
<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>

violon

https://jsfiddle.net/Hastig/t8L9Ly8o/

Plus d'options

Il existe quelques autres moyens d’agir en combinant les différentes options d’affichage et méthodes de centrage ci-dessus.

40
Hastig Zusammenstellen

Une astuce très simple consiste à ajouter une balise <span> et à y ajouter une couleur de fond. Cela ressemblera à ce que vous voulez.

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

Et CSS

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

POURQUOI?

La balise <span> dans une balise d'élément en ligne, elle ne s'étend donc que sur le contenu simulant l'effet.

7
Starx

h1 est un élément de niveau bloc. Vous devrez utiliser quelque chose comme span, car il s'agit d'un élément de niveau en ligne (c'est-à-dire qu'il ne s'étend pas sur toute la ligne).

Dans votre cas, je suggérerais ce qui suit:

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>
3
Andy

EDIT: la réponse ci-dessous s’appliquerait dans la plupart des cas. OP a toutefois indiqué plus tard qu’ils ne pouvaient éditer que le fichier CSS. Mais laisserons cela ici pour que cela puisse être utile à d’autres.

 enter image description here

La principale considération que les autres négligent est que OP a déclaré qu’ils ne pouvaient pas modifier le code HTML. 

Vous pouvez cibler ce dont vous avez besoin dans le DOM, puis ajouter des classes de manière dynamique avec javascript. Puis coiffez selon vos besoins.

Dans un exemple que j'ai créé, j'ai ciblé tous les éléments <p> avec jQuery et je l'ai enveloppé d'un div avec une classe de "couleur"

$( "p" ).wrap( "<div class='colored'></div>" );

Ensuite, dans mon CSS, j'ai ciblé le <p> et lui ai donné la couleur de fond et changé en display: inline

.colored p {
    display: inline;
    background: green;
}

En réglant l’affichage en ligne, vous perdez une partie du style dont elle hériterait normalement. Veillez donc à cibler l'élément le plus spécifique et à styler le conteneur afin qu'il s'adapte au reste de votre conception. Ceci est juste conçu comme un point de départ de travail. Utilisez avec précaution. Démo de travail sur CodePen

3
JGallardo

Vous pouvez utiliser la balise HTML5 <mark>.

HTML: 

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

CSS: 

mark
{
    background-color: green;
}
2
Dan Bray

Essayez de supprimer le centre d'alignement de texte et centrez le <h1> ou le <div> dans lequel le texte réside.

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
2
AgnosticDev

HTML

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1>

Css

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

Démo sur codepen

0
TiiGRUS

Vous devez mentionner la largeur de la balise h1.

votre css sera comme ça

h1 {
text-align: center;
background-color: green;
width: 600px;
 }
0
ramya

Essaye celui-là:

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

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

Veuillez noter que calc n'est pas compatible avec tous les navigateurs :) Je veux juste être cohérent avec l'alignement du message d'origine.

https://jsfiddle.net/richardferaro/ssyc04o4/

0
Richard Feraro