Ce que je veux, c'est que l'arrière-plan vert soit juste derrière le texte, pas à 100% de la largeur de la page. Voici mon code actuel:

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

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

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

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

Et puis appliquez 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 grand que son contenu, donc cela devrait le faire pour vous.

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.

En savoir plus sur w3schools , CSS Tricks et ici

Option 2

display: inline-flex;

• exige text-align: center;du 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>

à propos

Probablement le guide le plus populaire de Flexbox et celui que je référence constamment est à CSS Tricks

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/

à propos

En savoir plus sur les pseudo éléments css :: avant et :: après dans CSS Tricks et pseudo éléments en général sur w3schools

Option 6

display: inline-block;

• centrage avec position: absoluteettranslateX

• nécessite un position: relativeparent

.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>

à propos

Plus d'informations sur le centrage 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 recherchait mais peut-être utile aux autres pour trouver leur chemin ici.

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 façons de procéder en combinant les différentes options d'affichage et méthodes de centrage ci-dessus.

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

Pour éviter d'ajouter le balisage supplémentaire d'une travée intérieure, vous pouvez changer la <h1>propriété d'affichage de blockà inline(vous devez vous assurer que les éléments après les <h1>éléments sont des blocs.

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

JSFIDDLE http://jsfiddle.net/J7VBV/

Une astuce très simple pour ce faire est d'ajouter une <span>balise et d'ajouter une couleur d'arrière-plan à cela. Il ressemblera exactement à 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?

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

EDIT: la réponse ci-dessous s'appliquerait dans la plupart des cas. OP a cependant mentionné plus tard qu'il ne pouvait rien modifier d'autre que le fichier CSS. Mais laissera ceci ici pour qu'il puisse être utile à d'autres.

La principale considération que d'autres négligent est que OP a déclaré ne pas pouvoir modifier le HTML.

Vous pouvez cibler ce dont vous avez besoin dans le DOM puis ajouter des classes dynamiquement avec javascript. Puis coiffez selon vos besoins.

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

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

Ensuite, dans mon CSS, j'ai ciblé le <p>et lui ai donné la couleur d'arrière-plan et changé endisplay: inline

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

En définissant l'affichage en ligne, vous perdez une partie du style dont il hériterait normalement. Assurez-vous donc de cibler l'élément le plus spécifique et de styliser le conteneur en fonction du reste de votre conception. C'est juste un point de départ de travail. Utilisez avec précaution. Démo de travail sur CodePen

h1 est un élément de niveau bloc. Vous devrez utiliser quelque chose comme span à la place car il s'agit d'un élément de niveau en ligne (c'est-à-dire qu'il ne couvre pas 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>

Comme le notent les autres réponses, vous pouvez ajouter un background-colorà un<span> autour de votre texte pour que cela fonctionne.

Dans le cas où vous en avez line-height, vous verrez des lacunes. Pour résoudre ce problème, vous pouvez ajouter un box-shadowpeu de croissance à votre envergure. Vous voudrez également que box-decoration-break: clone;FireFox le rende correctement.

EDIT: Si vous rencontrez des problèmes dans IE11 avec le box-shadow, essayez également d'ajouter un outline: 1px solid [color];pour IE uniquement.

Voici à quoi cela ressemble en action:

.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}

h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}

<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>

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

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

peut utiliser la balise de marque html5 dans la balise de paragraphe et de titre.

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

Vous pouvez utiliser la <mark>balise HTML5 .

HTML:

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

CSS:

mark
{
    background-color: green;
}

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 dans le message d'origine.

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

Vous devez mentionner la largeur de la balise h1.

votre css sera comme ça

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

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

HTML

<h1 class="green-background"> Whatever text you want. </h1>

CSS

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}