Ответ 1

Поместите текст в встроенный элемент, например <span>.

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

И затем примените цвет фона для встроенного элемента.

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

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

Ответ 2

Немного поздно, но я подумал, что добавлю свои 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/

Ответ 3

Опция 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>

Ответ 4

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

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

И CSS

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

Почему?

<span> в теге встроенного элемента, поэтому он будет охватывать только контент, создающий эффект.

Ответ 5

h1 - элемент уровня блока. Вам нужно будет использовать что-то вроде span вместо этого, поскольку это встроенный элемент уровня (то есть: он не охватывает всю строку).

В вашем случае я бы предложил следующее:

style.css

.highlight 
{
   background-color: green;
}

HTML

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

Ответ 6

РЕДАКТИРОВАТЬ: ответ ниже будет применяться в большинстве случаев. OP позже упомянул, что они не могут редактировать ничего, кроме файла CSS. Но оставлю это здесь, так что это может быть полезно для других.

Основное соображение, которым пренебрегают другие, заключается в том, что OP заявил, что они не могут изменять HTML.

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

В примере, который я сделал, я нацелился на все элементы <p> с помощью jQuery и обернул его div с классом "color"

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

Затем в моем CSS я нацелилась на <p> присвоила ему цвет фона и изменила display: inline

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

Установив дисплей в положение inline, вы потеряете часть стиля, который он обычно наследует. Поэтому убедитесь, что вы нацеливаетесь на наиболее конкретный элемент и настраиваете контейнер так, чтобы он соответствовал остальной части вашего дизайна. Это просто означает, что рабочая отправная точка. Используйте осторожно. Рабочая демонстрация на CodePen

Ответ 7

Попробуйте удалить центр выравнивания текста и центрировать <h1> или <div>, в котором находится текст.

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

Ответ 8

Вы можете использовать тег HTML5 <mark>.

HTML:

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

CSS

mark
{
    background-color: green;
}

Ответ 9

Попробуйте следующее:

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/

Ответ 10

Вы должны упомянуть ширину тега h1.

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

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

Ответ 11

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

Демо на codeopen

Ответ 12

Добавьте следующий тэг в ваш css

body {
    padding:0px;
    margin:0px;
}

по умолчанию страница устанавливает некоторое пространство вокруг документа html.