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

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


当前回答

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上的演示

其他回答

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

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

style.css

.highlight 
{
   background-color: green;
}

html

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

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

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

你的CSS是这样的

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

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