css - 仅将属性应用到文本，而不是整行

Question

这是我的虚拟测试。

这是HTML的东西：

<h1> Header </h1>

这是CSS的东西：

body {
 background: pink;
}

h1 {
 background-color: #454545;
}

网页呈现如下：

                    

正如您在这张图片中看到的那样，我将属性应用于<h1>，但整行都有其效果。

我想要的是，直到“标题”一词的灰色背景，仅此而已（背景颜色只是一个示例。不仅如此。）。

Answer 1

尝试：

h1{
  display: inline-block;
}

Answer 2

h1 {
background-color: #454545;
display: inline-block;
}

编辑：

迟到了...@Scrimothy 已经回答了。

Answer 3

您可以在标题标签内使用跨度。然后您可以将h1 span{...}其用作您的 css 选择器，而不是设置所有标题或添加类来处理这个问题。

我有一个网站，我希望标题正常运行（并跨越宽度），但也需要在文本后面有背景。

body{
    background: pink;
}

h1{
    background-color: #454545;
}

h1 span{
    background-color: #454545;
}

<h1>Normal heading with a background</h1>
<p>I'm some content</p>
<h1 style="background-color: transparent"><span>Heading with my content in a &lt;span&gt;</span></h1>
<p>I'm some more content</p>