Я хочу, щоб зелений фон знаходився прямо за текстом, а не на 100% від ширини сторінки. Ось мій поточний код:

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

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

Покладіть текст у вбудований елемент , наприклад, a <span>.

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

А потім застосуйте колір фону на вбудованому елементі.

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

Вбудований елемент настільки ж великий, як і його вміст, так що це потрібно робити вам.

Варіант 1

display: table;

• не вимагається батьків

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>

скрипка

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

більше

display: table вказує елементу поводитись так, як звичайна таблиця HTML.

Детальніше про це в w3schools , CSS Tricks і тут

Варіант 2

display: inline-flex;

• вимагає text-align: center;від батьків

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

Варіант 3

display: flex;

• потрібен гнучкий батьківський контейнер

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

о

Напевно, найпопулярніший посібник по Flexbox і той, на який я постійно посилаюсь, є у CSS Tricks

Варіант 4

display: block;

• потрібен гнучкий батьківський контейнер

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

Варіант 5

::before

• вимагає введення слів у файл css (не дуже практично)

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>

скрипка

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

о

Більше про псевдоелементи css :: до та :: після в CSS Трюки та псевдоелементи взагалі в w3schools

Варіант 6

display: inline-block;

• центрування з position: absoluteіtranslateX

• вимагає 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>

о

Детальніше про центрування з transform: translate();(і центрування загалом) у цій статті про хитрощі CSS

Варіант 7

text-shadow: і box-shadow:

• не те, що шукала ОП, але може бути корисною для інших, хто шукає тут свій шлях.

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>

скрипка

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

Більше опцій

Є кілька інших способів зробити це шляхом комбінування різних варіантів відображення та методів центрування вище.

Трохи пізно до гри, але думав, що я додам свої 2 центи ...

Щоб уникнути додавання додаткової розмітки внутрішнього прольоту, ви можете змінити <h1>властивість відображення з blockна inline(уловлюйте, ви б забезпечили елементи після <h1>блокових елементів.

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

Результат

JSFIDDLE http://jsfiddle.net/J7VBV/

Дуже простий трюк для цього - додати <span>тег і додати до нього колір фону. Це буде виглядати саме так, як ви цього хочете.

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

І CSS

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

ЧОМУ?

<span> позначте в тезі вбудованого елемента, тож він буде охоплювати лише вміст, який підробляє ефект.

EDIT: відповідь нижче застосовується в більшості випадків. Однак пізніше OP зазначив, що вони не можуть редагувати нічого, крім файлу CSS. Але залишимо це тут, щоб воно могло бути корисним іншим.

Основна думка, яку інші нехтують, полягає в тому, що ОП заявило, що вони не можуть змінювати HTML.

Ви можете орієнтуватися на те, що вам потрібно в DOM, а потім додавати класи динамічно за допомогою JavaScript. Тоді стиль, як вам потрібно.

На прикладі, який я зробив, я націлив усі <p>елементи на jQuery і обернув його дівом із класом "кольорові"

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

Потім у моєму CSS я націлив <p>та надав йому колір тла та змінив наdisplay: inline

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

Встановивши дисплей на вбудований, ви втрачаєте частину стилю, який він зазвичай успадковує. Тому переконайтеся, що ви орієнтуєтесь на найбільш конкретний елемент та стилюєте контейнер так, щоб він відповідав іншій частині вашого дизайну. Це просто розуміється як робоча відправна точка. Використовуйте обережно. Робоча демонстрація на CodePen

h1 - елемент рівня блоку. Натомість вам потрібно буде використовувати щось на зразок span, оскільки це елемент вбудованого рівня (тобто: він не охоплює весь ряд).

У вашому випадку я б запропонував таке:

style.css

.highlight 
{
   background-color: green;
}

html

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

Як зазначають інші відповіді, ви можете додати background-colorа<span> всього тексту , щоб отримати цю роботу.

У випадку, коли у вас є line-height, ви побачите прогалини. Щоб виправити це, ви можете додати box-shadowтрохи зріст до свого періоду. Ви також захочете, box-decoration-break: clone;щоб FireFox візуалізувала його належним чином.

РЕДАКТУВАННЯ: Якщо у вас в IE11 виникають проблеми із тінню, спробуйте додати анекс outline: 1px solid [color];лише для IE.

Ось як це виглядає в дії:

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

Спробуйте вийняти центр вирівнювання тексту та відцентрувати <h1>або <div>текст знаходиться у ньому.

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

можна використовувати html5 знак тег в пункті і заголовок тега.

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

Ви можете використовувати <mark>тег HTML5 .

HTML:

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

CSS:

mark
{
    background-color: green;
}

Спробуйте це:

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

Зверніть увагу, що calc сумісний не з усіма веб-переглядачами :) Просто хочеться відповідати вирівнюванню в початковій публікації.

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

Ви повинні згадати ширину тегу h1 ..

ваш css буде таким

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

Демонстрація на кодпені

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