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

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


当前回答

编辑:下面的答案适用于大多数情况。然而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上的工作演示

其他回答

HTML

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

Css

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

codeen上的演示

编辑:下面的答案适用于大多数情况。然而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> 

和CSS

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

WHY?

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

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

你的CSS是这样的

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

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

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