我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?

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

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

当前回答

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

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

style.css

.highlight 
{
   background-color: green;
}

html

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

其他回答

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

你的CSS是这样的

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

编辑:下面的答案适用于大多数情况。然而OP后来提到，除了CSS文件，他们不能编辑任何东西。但我把这个留在这里，可能对其他人有用。

其他人忽略的主要考虑是OP声明他们不能修改HTML。

你可以在DOM中定位你需要的东西，然后用javascript动态地添加类。然后按你需要的样式。

在我做的一个例子中，我用jQuery瞄准所有<p>元素，并用一个带有“colored”类的div包装它

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

然后在我的CSS中，我针对<p>，并给它背景色，并更改为display: inline

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

通过将显示设置为内联，您将失去它通常会继承的一些样式。因此，请确保您的目标是最特定的元素，并设置容器的样式以适应您的其余设计。这只是一个工作的起点。小心使用。CodePen上的工作演示

将文本放入内联元素中，例如<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; 
}

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

推荐文章