如何在CSS中设置文字的背景颜色？
我想要的是绿色背景不是100％的页面宽度。 我只是想在文本后面。 HTML：
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1> The Last Will and Testament of Eric Jones</h1> </body> style.css中：
h1 { text-align: center; background-color: green; }
将文本放在一个内联元素中 ，例如<span> 。
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
然后在内联元素上应用背景颜色。
h1 { text-align: center; } h1 span { background-color: green; }
内联元素和内容一样大，所以应该为你做。
有点迟到游戏，但认为我会增加我的2美分…
为了避免添加内部跨度的额外标记，您可以将<h1>显示属性从block更改为inline （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/
选项1
display: table;
- 没有父母的要求
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>
一个非常简单的方法就是添加一个<span>标签并为其添加背景颜色。 它会看起来就像你想要的样子。
<h1> <span>The Last Will and Testament of Eric Jones</span> </h1>
和CSS
h1 { text-align: center; } h1 span { background-color: green; }
为什么？
内联元素标签中的<span>标签，所以它只会覆盖伪装效果的内容。
h1是块级元素。 您将需要使用类似span的东西，因为它是一个内联级别元素（即：它不跨越整行）。
在你的情况下，我会build议如下：
style.css文件
.highlight { background-color: green; }
HTML
<span class="highlight">only the text will be highlighted</span>
尝试删除文本alignment中心，并居中文本所在的<h1>或<div> 。
h1 { background-color:green; margin: 0 auto; width: 200px; }
其他人忽略的主要考虑是OP已经声明他们不能修改HTML。
您可以将目标定在DOM中，然后使用javascriptdynamic添加类。 然后，你需要的风格。
在我做的一个例子中，我使用jQuery将所有<p>元素作为目标，并用一个“color”
$( "p" ).wrap( "<div class='colored'></div>" );
然后在我的CSS我的目标是<p>并给它的背景颜色，并改为display: inline
.colored p { display: inline; background: green; }
通过将显示设置为内联，您将失去一些通常会inheritance的样式。 因此，请确保您的目标是最具体的元素，并将容器的样式devise为适合您的其余devise。 这只是一个工作的起点。 小心使用。 在CodePen上进行工作演示
试试这个：
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与所有浏览器不兼容:)只是希望与原始post中的alignment保持一致。
在你的CSS中添加下面的标签
body { padding:0px; margin:0px; }
默认页面在html文档周围设置一些空格。
