H1是块级元素。你需要使用像span这样的东西，因为它是一个内联级元素(即:它不跨越整行)。

针对你的情况，我建议如下:

style.css

.highlight 
{
   background-color: green;
}

html

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

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

有点晚了，但我想补充一下我的意见……

为了避免添加额外的内span标记，您可以将<h1>显示属性从块更改为内联(catch是您必须确保<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/

<mark>标签与背景颜色帮助我。

输入:

<p>
    Effective <mark style="background-color: light-gray">Nov 1, 2022</mark> We will be lowering our price.
</p>

输出: 自2022年11月1日起，我们将降低价格。

Ref

正如其他答案所指出的那样，您可以在文本周围的<span>中添加背景颜色以使其工作。

在有行高的情况下，你会看到空白。为了解决这个问题，你可以在你的跨度上添加一个盒子阴影。你还需要box-decoration-break: clone;FireFox才能正确渲染它。

编辑:如果你在IE11中遇到盒子阴影的问题，试着添加一个轮廓:1px纯色[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>

你可以使用HTML5 <mark>标记。

HTML:

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

CSS:

mark
{
    background-color: green;
}