我想要的是绿色背景刚好在文本的后面,而不是100%的页面宽度。这是我当前的代码:

h1 { text-align:中心; 背景颜色:绿色; } <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>


当前回答

试试这个:

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/

其他回答

可以使用html5标记标签内的段落和标题标签。

<p>lorem ipsum <mark>高光文本</mark> dolor sit.</p>

<h1 style=" font - family:宋体;">埃里克·琼斯最后的遗嘱< h1> .

将文本放入内联元素中,例如<span>。

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

然后在内联元素上应用背景色。

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

内联元素和它的内容一样大,所以这应该可以帮你。

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

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

输入:

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

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

Ref