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

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

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

style.css

.highlight 
{
   background-color: green;
}

html

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

一个非常简单的技巧是添加一个<span>标记，并为其添加背景色。它会变成你想要的样子。

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

和CSS

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

WHY?

<span>标记在一个内联元素标记中，因此它将只跨越伪造效果的内容。

试试这个:

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/

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

输入:

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

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

Ref

你必须提到h1标签的宽度..

你的CSS是这样的

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