Wie stelle ich die Hintergrundfarbe nur für Zieltext ein, nur mit CSS?

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

Um zu vermeiden, dass die zusätzliche Markierung eines inneren Abschnitts hinzugefügt wird, können Sie die <h1>-Anzeigeeigenschaft von block in inline ändern (catch) Sie müssen sicherstellen, dass die Elemente nach <h1> Blockelemente 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/

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 unter w3schools , CSS Tricks und hier

Option 2

display: inline-flex;

• erfordert text-align: center; für das übergeordnete Element

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

.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

Wahrscheinlich ist das beliebteste Handbuch zu Flexbox und eines, auf das ich ständig verweise, unter CSS Tricks

Option 4

display: block;

• erfordert einen flexiblen Elterncontainer

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

Weitere Informationen zu css-Pseudoelementen :: before und :: after at CSS-Tricks und Pseudoelemente allgemein bei w3schools

Option 6

display: inline-block;

• zentrieren mit position: absolute und translateX

• erfordert ein position: relative-übergeordnetes Element

.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

Mehr zum Zentrieren mit transform: translate(); (und allgemein zum Zentrieren) in dieser CSS-Trick-Artikel

Option 7

text-shadow: UND box-shadow:

• nicht das, wonach die OP suchte, 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 einige andere Möglichkeiten, dies durch Kombinieren der verschiedenen Anzeigeoptionen und Zentriermethoden zu erreichen.

Ein sehr einfacher Trick ist das Hinzufügen eines <span>-Tags und das Hinzufügen einer Hintergrundfarbe. Es wird genau so aussehen, wie Sie es möchten.

<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, so dass es nur den Inhalt umfasst, der den Effekt verursacht.

h1 ist ein Blockebenenelement. Sie müssen stattdessen 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>

BEARBEITEN: die Antwort unten würde in den meisten Fällen zutreffen. OP hat jedoch später erwähnt, dass sie nur die CSS-Datei bearbeiten können. Aber ich werde dies hier belassen, so dass es für andere von Nutzen sein kann.

Die Hauptüberlegung, die andere vernachlässigen, ist, dass OP erklärt hat, dass sie den HTML-Code nicht ändern können. 

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

In einem Beispiel, das ich gemacht habe, habe ich alle <p>-Elemente mit jQuery anvisiert und sie mit einem div mit einer Klasse von "color" versehen.

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

Dann habe ich in meinem CSS den <p> angesteuert und ihm die Hintergrundfarbe gegeben und display: inline geändert.

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

Wenn Sie die Anzeige auf Inline setzen, verlieren Sie etwas von dem Stil, den sie normalerweise erben würde. Stellen Sie daher sicher, dass Sie auf das spezifischste Element abzielen und den Container so gestalten, dass er zum restlichen Design passt. Dies ist nur als Ausgangspunkt für die Arbeit gedacht. Vorsichtig verwenden. Arbeitsdemo auf CodePen

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

HTML:

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

CSS:

mark
{
    background-color: green;
}

Entfernen Sie das Textausrichtungszentrum und zentrieren Sie den <h1> oder <div>, in dem sich der Text befindet.

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

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

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

ihre CSS wird so sein

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

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.

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