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

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

h1 {
text-align: center;
background-color: green;
}
<h1>The Last Will and Testament of Eric Jones</h1>

626372 次浏览
小开
最佳答案

将文本放在内联元素中，例如<span>。

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

然后在内联元素上应用背景色。

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

内联元素和它的内容一样大，所以这应该可以帮你。

小开

尝试删除文本对齐中心，并将文本所在的<h1>或<div>居中。

h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}
小开

这样做的一个非常简单的技巧是添加一个<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这样的东西，因为它是一个内联级元素(即:它不跨越整行)。

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

style.css

.highlight
{
background-color: green;
}

超文本标记语言

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

有点晚了，但我想补充一下我的意见……

为了避免添加额外的内跨度标记，你可以将<h1>显示属性从block更改为inline (catch是你必须确保<h1>之后的元素是块元素。

超文本标记语言

<h1>
The Last Will and Testament of
Eric Jones</h1>
<p>Some other text</p>

CSS

h1{
display:inline;
background-color:green;
color:#fff;
}
< p > 结果
enter image description here
JSFIDDLE http://jsfiddle.net/J7VBV/ < / p >
小开

选项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>

fiddle

http://jsfiddle.net/J7VBV/293/

more

display: table tells the element to behave as a normal HTML table would.

More about it at w3schools, CSS Tricks and here

Option 2

display: inline-flex;

  • requires text-align: center; on parent

.container {
text-align: center; /* center the child */
}
h1 {
display: inline-flex; /* keep the background color wrapped tight */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>

选项3

display: flex;

  • 需要一个灵活的父容器

.container {
display: flex;
justify-content: center; /* center the child */
}
h1 {
display: flex;
/* margin: 0 auto; or use auto left/right margin instead of justify-content center */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
    <div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>

关于

也许最受欢迎的Flexbox指南和我经常引用的指南是CSS技巧

选项4

display: block;

  • 需要一个灵活的父容器

.container {
display: flex;
justify-content: center; /* centers child */
}
h1 {
display: block;
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>

选择5

::before

  • 需要在CSS文件中输入单词(不太实用)

h1 {
display: flex; /* set a flex box */
justify-content: center; /* so you can center the content like this */
}


h1::before {
content:'The Last Will and Testament of Eric Jones'; /* the content */
padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}
<h1></h1>

fiddle

http://jsfiddle.net/J7VBV/457/

about

More about css pseudo elements ::before and ::after at CSS Tricks and pseudo elements in general at w3schools

Option 6

display: inline-block;

  • centering with position: absolute and translateX

  • requires a position: relative parent

.container {
position: relative; /* required for absolute positioned child */
}
h1 {
display: inline-block; /* keeps container wrapped tight to content */
position: absolute; /* to absolutely position element */
top: 0;
left: 50%; /* part1 of centering with translateX/Y */
transform: translateX(-50%); /* part2 of centering with translateX/Y */
white-space: nowrap; /* text lines will collapse without this */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
  <h1>The Last Will and Testament of Eric Jones</h1>

about

More on centering with transform: translate(); (and centering in general) in this CSS tricks article

Option 7

text-shadow: and box-shadow:

  • not what the OP was looking for but maybe helpful to others finding their way here.

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
text-shadow: 0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green,
0 0 5px green,0 0 5px green;
}
h2 {
text-shadow: -5px -5px 5px green,-5px 5px 5px green,
5px -5px 5px green,5px 5px 5px green;
}
h3 {
color: hsla(0, 0%, 100%, 0.8);
text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 10px hsla(120, 100%, 25%, 0.5),
0 0 5px hsla(120, 100%, 25%, 1),
0 0 5px hsla(120, 100%, 25%, 1),
0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
text-shadow: 0px 0px 35px green,0px 0px 35px green,
0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
box-shadow: inset 0px 0px 0px 1000px green;
}
<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>

小提琴

https://jsfiddle.net/Hastig/t8L9Ly8o/

更多的选择

通过结合上面的不同显示选项和居中方法，还有其他一些方法可以做到这一点。

小开

试试这个:

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不兼容所有浏览器:)只是想与原始帖子中的对齐一致。

https://jsfiddle.net/richardferaro/ssyc04o4/

小开

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

enter image description here

其他人忽略的主要考虑是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

小开

你可以使用HTML5的<mark>标签。

HTML:

<h1><mark>The Last Will and Testament of Eric Jones</mark></h1>

CSS:

mark
{
background-color: green;
}
小开

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

你的CSS是这样的

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

超文本标记语言

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

< a href = " https://codepen。io/tiigrus/pen/wNBLgN" rel="nofollow noreferrer">Demo on codepen . io/tiigrus/pen/wNBLgN" rel="nofollow noreferrer

小开

超文本标记语言

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

正如其他答案所指出的，你可以在你的文本周围添加background-color到<span>来让它工作。

在你有line-height的情况下，你会看到空白。为了解决这个问题，你可以在你的span中添加一个带有一点点增长的box-shadow。你还需要FireFox的box-decoration-break: clone;来正确地呈现它。

编辑:如果你在IE11中遇到box-shadow的问题，试着只在IE中添加outline: 1px solid [color];。

下面是它实际运行的样子:

css技术的例子

.container {
margin: 0 auto;
width: 400px;
padding: 10px;
border: 1px solid black;
}


h2 {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
text-transform: uppercase;
line-height: 1.5;
text-align: center;
font-size: 40px;
}


h2 > span {
background-color: #D32;
color: #FFF;
box-shadow: -10px 0px 0 7px #D32,
10px 0px 0 7px #D32,
0 0 0 7px #D32;
box-decoration-break: clone;
}
<div class="container">
<h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>

小开 

<h1 style="display:inline-block;text-align: center;background : red;">The Last Will and Testament of Eric Jones</h1>

小开

可以使用html5的马克标签在段落和标题标签。

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

小开

很容易:

<p>lorem ibsum....</p>

样式:

p{
background-color: #eee;
display: inline;
}

背景设置为元素的整体大小; 修改行内元素和块元素的区别从这里

小开

<mark>标签和background-color帮助了我。

输入:

<p>
Effective <mark style="background-color: light-gray">Nov 1, 2022</mark> We will be lowering our price.
</p>

< >强输出: 有效Nov 1, 2022我们将降低我们的价格

< a href = " https://stackoverflow.com/a/61610535/3411787 " > Ref < / >


提交答案