Những gì tôi muốn là cho nền màu xanh lá cây chỉ đứng sau văn bản, không phải là 100% chiều rộng của trang. Đây là mã hiện tại của tôi:

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

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

Đặt văn bản trong một yếu tố nội tuyến , chẳng hạn như a <span>.

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

Và sau đó áp dụng màu nền cho thành phần nội tuyến.

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

Một phần tử nội tuyến lớn như nội dung của nó, vì vậy nó sẽ làm điều đó cho bạn.

lựa chọn 1

display: table;

• không cần cha mẹ

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>

vĩ cầm

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

hơn

display: table nói cho phần tử hoạt động như một bảng HTML bình thường.

Tìm hiểu thêm về nó tại w3schools , CSS Tricks và tại đây

Lựa chọn 2

display: inline-flex;

• yêu cầu text-align: center;cha mẹ

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

Lựa chọn 3

display: flex;

• yêu cầu một container cha 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>

trong khoảng

Có lẽ hướng dẫn phổ biến nhất về Flexbox và một hướng dẫn tôi tham khảo liên tục là tại Thủ thuật CSS

Lựa chọn 4

display: block;

• yêu cầu một container cha flex

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

Lựa chọn 5

::before

• yêu cầu nhập từ trong tệp css (không thực tế lắm)

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>

vĩ cầm

http://jsfiddle.net/J7VBV/456/

trong khoảng

Tìm hiểu thêm về các phần tử giả css :: trước và :: sau tại CSS Tricks và các phần tử giả nói chung tại w3schools

Lựa chọn 6

display: inline-block;

• định tâm với position: absolutevàtranslateX

• đòi hỏi position: relativecha mẹ

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

trong khoảng

Tìm hiểu thêm về định tâm với transform: translate();(và định tâm nói chung) trong bài viết về thủ thuật CSS này

Lựa chọn 7

text-shadow: và box-shadow:

• không phải những gì OP đang tìm kiếm nhưng có thể hữu ích cho những người khác tìm đường đến đây.

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>

vĩ cầm

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

Lựa chọn khác

Có một vài cách khác để làm điều này bằng cách kết hợp các tùy chọn hiển thị khác nhau và các phương pháp định tâm ở trên.

Một chút muộn để chơi game nhưng nghĩ rằng tôi sẽ thêm 2 xu của mình ...

Để tránh thêm đánh dấu bổ sung của một khoảng bên trong, bạn có thể thay đổi thuộc tính <h1>hiển thị từ blockthành inline(bắt là bạn sẽ đảm bảo các phần tử sau các <h1>phần tử khối.

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

Kết quả

JSFIDDLE http://jsfiddle.net/J7VBV/

Một mẹo rất đơn giản để làm như vậy, là thêm một <span>thẻ và thêm màu nền cho nó. Nó sẽ trông giống như cách bạn muốn.

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

Và CSS

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

TẠI SAO?

<span> thẻ trong thẻ phần tử nội tuyến, vì vậy nó sẽ chỉ trải rộng trên nội dung giả mạo hiệu ứng.

EDIT: câu trả lời dưới đây sẽ được áp dụng trong hầu hết các trường hợp. OP tuy nhiên sau đó đã đề cập rằng họ không thể chỉnh sửa bất cứ thứ gì ngoài tệp CSS. Nhưng sẽ để nó ở đây để nó có thể được sử dụng cho người khác.

Sự cân nhắc chính mà những người khác đang bỏ qua là OP đã tuyên bố rằng họ không thể sửa đổi HTML.

Bạn có thể nhắm mục tiêu những gì bạn cần trong DOM sau đó thêm các lớp động với javascript. Sau đó, phong cách như bạn cần.

Trong một ví dụ mà tôi đã tạo, tôi đã nhắm mục tiêu tất cả các <p>phần tử với jQuery và gói nó bằng một div với một lớp "màu"

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

Sau đó, trong CSS của tôi, tôi đã nhắm mục tiêu <p>và cho nó màu nền và thay đổi thànhdisplay: inline

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

Bằng cách đặt màn hình thành nội tuyến, bạn sẽ mất một số kiểu dáng mà nó thường sẽ kế thừa. Vì vậy, hãy chắc chắn rằng bạn nhắm mục tiêu các yếu tố cụ thể nhất và phong cách container để phù hợp với phần còn lại của thiết kế của bạn. Điều này chỉ có nghĩa là một điểm khởi đầu làm việc. Sử dụng cẩn thận. Bản demo hoạt động trên CodePen

h1 là một yếu tố cấp khối. Bạn sẽ cần phải sử dụng một cái gì đó như span thay vì nó là một yếu tố cấp độ nội tuyến (nghĩa là: nó không bao trùm toàn bộ hàng).

Trong trường hợp của bạn, tôi sẽ đề nghị như sau:

style.css

.highlight 
{
   background-color: green;
}

html

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

Như các câu trả lời khác lưu ý, bạn có thể thêm một background-colorvào <span>xung quanh văn bản của bạn để làm cho điều này hoạt động.

Trong trường hợp bạn có line-heightmặc dù, bạn sẽ thấy những khoảng trống. Để khắc phục điều này, bạn có thể thêm một box-shadowchút phát triển vào nhịp của mình. Bạn cũng sẽ muốn box-decoration-break: clone;FireFox kết xuất nó đúng cách.

EDIT: Nếu bạn gặp sự cố trong IE11 với bóng hộp, hãy thử thêm một outline: 1px solid [color];chỉ cho IE.

Đây là những gì nó trông giống như trong hành động:

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

Hãy thử xóa trung tâm căn chỉnh văn bản và căn giữa <h1>hoặc <div>văn bản nằm trong đó.

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

có thể sử dụng thẻ đánh dấu html5 trong đoạn văn và thẻ tiêu đề.

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

Bạn có thể sử dụng <mark>thẻ HTML5 .

HTML:

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

CSS:

mark
{
    background-color: green;
}

Hãy thử cái này:

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

Xin lưu ý rằng calc không tương thích với tất cả các trình duyệt :) Chỉ muốn phù hợp với sự liên kết trong bài viết gốc.

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

Bạn phải đề cập đến chiều rộng của thẻ h1 ..

Css của bạn sẽ như thế này

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

Bản demo trên 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; 
}