选项1

Question

问题

如何在文本后面动态添加绿色背景，而不是整个页面宽度，只显示文本。

问题

绿色正在使用我当前的代码扩展到整个页面。我无法修改HTML或Javascript，只能修改CSS文件。

enter image description here

HTML

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

CSS

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

Answer 1

将文字放在inline element中，例如<span>。

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

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

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

内联元素与其内容一样大，所以应该为你做。

Answer 2

游戏有点晚，但我想加上我的2美分......

为了避免添加内部跨度的额外标记，您可以将<h1>显示属性从block更改为inline（捕捉是否可以确保<h1>之后的元素{1}}是块元素。

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

<强>结果
enter image description here
的jsfiddle http://jsfiddle.net/J7VBV/

Answer 3

选项1

<强> display: table;

无需父母

＆＃13;

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

＆＃13;

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

＆＃13;

<强>拨弄

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

更多

display: table告诉元素表现为普通的HTML表格。

有关w3schools，CSS Tricks和here
的更多信息
选项2

<强> display: inline-flex;

在父
上需要text-align: center;

＆＃13;
＆＃13;
.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; }
＆＃13;
<div class="container"> <h1>The Last Will and Testament of Eric Jones</h1> </div>
＆＃13;
＆＃13;
＆＃13;

选项3

<强> display: flex;

需要灵活的父容器

＆＃13;
＆＃13;
.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; }
＆＃13;
<div class="container"> <h1>The Last Will and Testament of Eric Jones</h1> </div>
＆＃13;
＆＃13;
＆＃13;

关于

可能最受欢迎的Flexbox指南和我不断参考的指南是CSS Tricks

选项4

<强> display: block;

需要灵活的父容器

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

选项5

<强> ::before

要求在css文件中输入单词（不太实用）

＆＃13;
＆＃13;
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; }
＆＃13;
<h1></h1>
＆＃13;
＆＃13;
＆＃13;

<强>拨弄

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

关于

有关css伪元素:: CSS Tricks之前和之后的更多信息以及w3schools处一般的伪元素

选项6

<强> display: inline-block;

以position: absolute和translateX

为中心

需要position: relative父

＆＃13;
＆＃13;
.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; }
＆＃13;
<h1>The Last Will and Testament of Eric Jones</h1>
＆＃13;
＆＃13;
＆＃13;

关于

更多关于this CSS tricks article
中transform: translate();（以及一般中心）为中心的内容
选项7

text-shadow:和box-shadow:

不是OP正在寻找的东西，但可能对其他人在这里找到他们的方式很有帮助。

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

<强>拨弄

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

更多选项

通过结合上面的不同显示选项和居中方法，还有其他一些方法可以解决这个问题。

Answer 4

这样做的一个非常简单的技巧是添加<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>标记，因此它只会覆盖伪造效果的内容。

Answer 5

编辑：以下答案适用于大多数情况。然而，OP后来提到他们无法编辑CSS文件以外的任何内容。但是会留在这里，所以它可能对其他人有用。

其他人忽视的主要考虑因素是OP已声明他们无法修改HTML。

您可以在DOM中定位所需内容，然后使用javascript动态添加类。然后根据需要设计风格。

在我创建的一个示例中，我使用jQuery将所有<p>元素作为目标，并使用带有＆＃34;彩色＆＃34;

类的div包装它

$( "p" ).wrap( "<div class='colored'></div>" );

然后在我的CSS中，我定位<p>并为其指定背景颜色并更改为display: inline

.colored p {
    display: inline;
    background: green;
}

通过将显示设置为内联，您将失去一些通常会继承的样式。因此，请确保定位最具体的元素并设置容器的样式以适应设计的其余部分。这只是一个工作起点。小心使用。关于CodePen

的工作演示

Answer 6

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

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

Answer 7

h1是块级元素。你需要使用span这样的东西，因为它是一个内联级元素（即：它不会跨越整行）。

在您的情况下，我建议如下：

的style.css

.highlight 
{
   background-color: green;
}

HTML

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

Answer 8

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

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

Answer 9

您可以使用HTML5 <mark>代码。

<强> HTML：

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

<强> CSS：

mark
{
    background-color: green;
}

Answer 10

如其他答案所述，您可以在文本周围的background-color上添加<span>，以使其生效。

但是，如果您有line-height，则会看到空白。要解决此问题，您可以添加一个box-shadow，并在其范围内增加一点点。您还将希望box-decoration-break: clone;为FireFox正确呈现。

编辑：如果在IE11中出现阴影，请尝试仅为IE添加outline: 1px solid [color];。

实际情况如下：

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

Answer 11

试试这个：

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/

Answer 12

您必须提及h1标签的宽度。

您的CSS将是这样

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

Answer 13

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

Demo on codepen

Answer 14

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

Answer 15

容易：

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

带样式：

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

背景设置为元素的整个大小；修改行内元素和块元素的区别from here

Answer 16

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

如何仅使用CSS设置目标文本的背景颜色？

问题

问题

HTML

CSS

16 个答案:

选项1

选项2

选项3

选项4

选项5

选项6

选项7

更多选项

的 WHY吗

编辑：以下答案适用于大多数情况。然而，OP后来提到他们无法编辑CSS文件以外的任何内容。但是会留在这里，所以它可能对其他人有用。

容易：