Chcę, aby zielone tło znajdowało się tuż za tekstem, a nie na 100% szerokości strony. Oto mój obecny kod:

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

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

Umieść tekst w elemencie wbudowanym , takim jak <span>.

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

Następnie zastosuj kolor tła w elemencie wbudowanym.

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

Element wbudowany jest tak duży, jak jego zawartość, więc powinno to zrobić za Ciebie.

opcja 1

display: table;

• nie jest wymagany rodzic

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>

skrzypce

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

więcej

display: table mówi elementowi, aby zachowywał się tak jak normalna tabela HTML.

Więcej o tym w w3schools , CSS Tricks i tutaj

Opcja 2

display: inline-flex;

• wymaga text-align: center;od rodzica

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

Wariant 3

display: flex;

• wymaga elastycznego kontenera nadrzędnego

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

o

Prawdopodobnie najpopularniejszy przewodnik po Flexbox, do którego ciągle się odwołuję, znajduje się w CSS Tricks

Opcja 4

display: block;

• wymaga elastycznego kontenera nadrzędnego

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

Opcja 5

::before

• wymaga wpisania słów w pliku css (niezbyt praktyczne)

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>

skrzypce

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

o

Więcej o pseudo elementach CSS :: before i :: after na CSS Tricks i ogólnie o pseudo elementach na w3schools

Opcja 6

display: inline-block;

• centrowanie za pomocą position: absoluteitranslateX

• wymaga position: relativerodzica

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

o

Więcej o centrowaniu z transform: translate();(i ogólnie centrowaniu) w tym artykule o sztuczkach CSS

Opcja 7

text-shadow: i box-shadow:

• nie to, czego szukał PO, ale może pomóc innym w znalezieniu drogi tutaj.

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>

skrzypce

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

Więcej możliwości

Jest na to kilka innych sposobów, łącząc różne opcje wyświetlania i metody środkowania powyżej.

Trochę późno na grę, ale pomyślałem, że dodam moje 2 centy ...

Aby uniknąć dodawania dodatkowego znacznika wewnętrznego zakresu, możesz zmienić <h1>właściwość wyświetlania z blockna inline(złapać, aby upewnić się, że elementy po <h1>są elementami blokowymi.

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

Wynik

JSFIDDLE http://jsfiddle.net/J7VBV/

Bardzo prostą sztuczką jest dodanie <span>tagu i dodanie do niego koloru tła. Będzie wyglądać tak, jak chcesz.

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

I CSS

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

CZEMU?

<span> w tagu elementu wbudowanego, więc będzie obejmował tylko treść udającą efekt.

EDYTUJ: odpowiedź poniżej będzie miała zastosowanie w większości przypadków. OP jednak później wspomniał, że nie mogą edytować niczego poza plikiem CSS. Ale zostawię to tutaj, aby mogło się przydać innym.

Główną kwestią, którą inni zaniedbują, jest to, że OP stwierdził, że nie może modyfikować HTML.

Możesz kierować na to, czego potrzebujesz w DOM, a następnie dodawać klasy dynamicznie za pomocą javascript. Następnie stylizuj według potrzeb.

W utworzonym przeze mnie przykładzie skierowałem wszystkie <p>elementy za pomocą jQuery i otoczyłem go elementem div z klasą „coloured”

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

Następnie w moim CSS wycelowałem <p>i nadałem mu kolor tła i zmieniłem nadisplay: inline

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

Ustawiając wyświetlacz jako wbudowany, tracisz część stylu, który normalnie by dziedziczył. Dlatego upewnij się, że celujesz w najbardziej konkretny element i stylizujesz kontener tak, aby pasował do reszty projektu. Jest to tylko punkt wyjścia do pracy. Używaj ostrożnie. Działające demo na CodePen

h1 jest elementem blokowym. Będziesz musiał użyć czegoś takiego jak span, ponieważ jest to element liniowy (tj. Nie obejmuje całego wiersza).

W twoim przypadku proponuję co następuje:

style.css

.highlight 
{
   background-color: green;
}

html

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

Jak zauważają inne odpowiedzi, możesz dodać background-colordo<span> wokół tekstu, aby to zadziałało.

W przypadku, gdy line-heightjednak masz, zobaczysz luki. Aby to naprawić, możesz dodać box-shadowtrochę wzrostu do swojej rozpiętości. Będziesz także chcą box-decoration-break: clone;dla FireFox, aby uczynić go prawidłowo.

EDYCJA: Jeśli masz problemy w IE11 z box-shadow, spróbuj dodać outline: 1px solid [color];również tylko dla IE.

Oto jak to wygląda w akcji:

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

Spróbuj usunąć środek wyrównania tekstu i wyśrodkować <h1>lub <div>tekst znajduje się w środku .

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

może używać znacznika znacznika HTML5 w tagu akapitu i nagłówka.

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

Możesz użyć <mark>tagu HTML5 .

HTML:

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

CSS:

mark
{
    background-color: green;
}

Spróbuj tego:

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

Pamiętaj, że kalkulator nie jest kompatybilny ze wszystkimi przeglądarkami :) Po prostu chcę być spójny z wyrównaniem w oryginalnym poście.

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

Musisz wspomnieć o szerokości tagu h1 ..

twój css będzie taki

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