Was ich möchte, ist, dass der grüne Hintergrund direkt hinter dem Text liegt und nicht 100% der Seitenbreite. Hier ist mein aktueller Code:

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

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

Fügen Sie den Text in ein Inline-Element ein , z <span>.

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

Wenden Sie dann die Hintergrundfarbe auf das Inline-Element an.

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

Ein Inline-Element ist so groß wie sein Inhalt, das sollte es für Sie tun.

Option 1

display: table;

• Kein Elternteil erforderlich

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>

Geige

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

Mehr

display: table Weist das Element an, sich wie eine normale HTML-Tabelle zu verhalten.

Mehr dazu bei w3schools , CSS Tricks und hier

Option 2

display: inline-flex;

• erfordert text-align: center;auf Eltern

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

• erfordert einen flexiblen übergeordneten Container

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

Über

Der wahrscheinlich beliebteste Leitfaden für Flexbox und einer, auf den ich ständig verweise, ist CSS Tricks

Option 4

display: block;

• erfordert einen flexiblen übergeordneten Container

.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

• erfordert die Eingabe von Wörtern in die CSS-Datei (nicht sehr praktisch)

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>

Geige

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

Über

Mehr über CSS- Pseudoelemente :: vorher und :: nachher bei CSS Tricks und Pseudoelemente allgemein bei w3schools

Option 6

display: inline-block;

• zentrieren mit position: absoluteundtranslateX

• erfordert einen position: relativeElternteil

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

Über

Weitere Informationen zum Zentrieren mit transform: translate();(und zum Zentrieren im Allgemeinen) finden Sie in diesem Artikel zu CSS-Tricks

Option 7

text-shadow: und box-shadow:

• nicht das, wonach das OP gesucht hat, aber vielleicht hilfreich für andere, die ihren Weg hierher finden.

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>

Geige

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

Mehr Optionen

Es gibt noch einige andere Möglichkeiten, um dies zu erreichen, indem Sie die verschiedenen Anzeigeoptionen und Zentrierungsmethoden oben kombinieren.

Ein bisschen spät zum Spiel, aber ich dachte, ich würde meine 2 Cent hinzufügen ...

Um das Hinzufügen des zusätzlichen Markups eines inneren Bereichs zu vermeiden, können Sie die <h1>Anzeigeeigenschaft von blockin ändern inline(fangen Sie an, Sie hätten sichergestellt, dass die Elemente nach den <h1>Blockelementen sind.

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;
}

Ergebnis

JSFIDDLE http://jsfiddle.net/J7VBV/

Ein sehr einfacher Trick besteht darin, ein <span>Tag und eine Hintergrundfarbe hinzuzufügen. Es wird genau so aussehen, wie Sie es wollen.

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

Und CSS

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

WARUM?

<span> Tag in einem Inline-Element-Tag, sodass es sich nur über den Inhalt erstreckt, der den Effekt vortäuscht.

BEARBEITEN: Die Antwort unten würde in den meisten Fällen zutreffen. OP erwähnte jedoch später, dass sie nichts anderes als die CSS-Datei bearbeiten konnten. Aber lassen Sie dies hier, damit es für andere von Nutzen sein kann.

Die wichtigste Überlegung, die andere vernachlässigen, ist, dass OP angegeben hat, dass sie den HTML-Code nicht ändern können.

Sie können gezielt auf das zugreifen, was Sie im DOM benötigen, und dann Klassen dynamisch mit Javascript hinzufügen. Dann stylen Sie nach Bedarf.

In einem Beispiel, das ich gemacht habe, habe ich alle <p>Elemente mit jQuery als Ziel ausgewählt und es mit einem Div mit einer Klasse von "farbig" umwickelt.

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

Dann zielte ich in meinem CSS auf das <p>und gab ihm die Hintergrundfarbe und wechselte zudisplay: inline

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

Wenn Sie die Anzeige auf Inline einstellen, verlieren Sie einen Teil des Stils, den sie normalerweise erben würde. Stellen Sie also sicher, dass Sie auf das spezifischste Element abzielen und den Container so gestalten, dass er zum Rest Ihres Designs passt. Dies ist nur als Ausgangspunkt gedacht. Vorsichtig verwenden. Arbeitsdemo auf CodePen

h1 ist ein Blockebenenelement. Sie müssen stattdessen so etwas wie span verwenden, da es sich um ein Inline-Level-Element handelt (dh es erstreckt sich nicht über die gesamte Zeile).

In Ihrem Fall würde ich Folgendes vorschlagen:

style.css

.highlight 
{
   background-color: green;
}

html

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

Wie die anderen Antworten vermerken, können Sie a background-colorzu a hinzufügen<span> Ihrem Text , damit dies funktioniert.

In dem Fall, in dem Sie jedoch haben line-height, werden Sie Lücken sehen. Um dies zu beheben, können Sie box-shadowIhrer Spanne ein bisschen Wachstum hinzufügen . Sie möchten auch, dass box-decoration-break: clone;FireFox es richtig rendert.

BEARBEITEN: Wenn Sie in IE11 Probleme mit dem Box-Shadow haben, versuchen Sie, auch eine outline: 1px solid [color];für IE hinzuzufügen .

So sieht es in Aktion aus:

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

Versuchen Sie, den Text-Ausrichtung Zentrum entfernt und das Zentrum <h1>oder <div>in den Text befindet.

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

kann das HTML5- Markierungs- Tag innerhalb des Absatz- und Überschriften-Tags verwenden.

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

Sie können das HTML5- <mark>Tag verwenden.

HTML:

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

CSS:

mark
{
    background-color: green;
}

Probier diese:

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);
}

Bitte beachten Sie, dass calc nicht mit allen Browsern kompatibel ist :) Ich möchte nur mit der Ausrichtung im ursprünglichen Beitrag übereinstimmen.

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

Sie müssen die Breite des h1-Tags angeben.

Ihr CSS wird so sein

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

Demo auf 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; 
}