182

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

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

4

16 回答 16

247

将文本放入内联元素中，例如<span>.

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

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

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

内联元素与其内容一样大，因此应该为您完成。

于 2013-01-14T01:12:26.747 回答
98

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

小提琴

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

更多的

display: table告诉元素表现得像一个普通的 HTML 表格。

在w3schools、CSS Tricks和这里了解更多信息

选项 2

display: inline-flex;

  • 需要text-align: center;父母

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

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

小提琴

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

关于

更多关于 css 伪元素 ::before 和 ::after 在CSS Tricks和伪元素在w3schools

选项 6

display: inline-block;

  • position: absolute以和为中心translateX

  • 需要position: relative父母

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

关于

在这篇 CSS 技巧文章中更多关于居中transform: translate();（和一般居中）

选项 7

text-shadow:和box-shadow:

  • 不是 OP 想要的，但可能有助于其他人在这里找到自己的方式。

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/

更多的选择

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

于 2015-10-03T06:17:29.340 回答
57

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

为避免添加内部跨度的额外标记，您可以将<h1>显示属性从更改block为inline（注意，您必须确保<h1>块元素之后的元素。

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

结果
在此处输入图像描述
JSFIDDLE http://jsfiddle.net/J7VBV/

于 2013-11-28T03:47:29.700 回答
10

正如其他答案所指出的，您可以在文本周围添加 abackground-color以使其正常工作。<span>

在你有的情况下line-height，你会看到差距。要解决此问题，您可以box-shadow在跨度中添加一点点增长。您还希望box-decoration-break: clone;FireFox 能够正确渲染它。

编辑：如果您在 IE11 中遇到 box-shadow 问题，请尝试outline: 1px solid [color];仅为 IE 添加一个。

这是它的实际效果：

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>

于 2019-12-03T16:54:56.987 回答
9

这样做的一个非常简单的技巧是添加<span>标签并为其添加背景颜色。它看起来就像你想要的那样。

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

和 CSS

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

为什么？

<span>内联元素标签中的标签，因此它只会跨越伪造效果的内容。

于 2013-01-14T01:12:51.513 回答
5

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

在此处输入图像描述

其他人忽略的主要考虑因素是 OP 已经声明他们不能修改 HTML。

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

在我制作的一个示例中，我<p>使用 jQuery 定位所有元素，并用带有“colored”类的 div 包装它

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

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

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

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

于 2017-09-08T00:10:56.263 回答
4

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

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

样式.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>
于 2013-01-14T01:14:30.750 回答
3

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

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
于 2013-01-14T01:12:42.013 回答
3

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

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

于 2020-05-05T10:04:03.863 回答
2

您可以使用 HTML5<mark>标记。

HTML：

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

CSS：

mark
{
    background-color: green;
}
于 2017-11-27T00:48:57.763 回答
1

容易地 ：

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

风格：

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

背景设置为元素的整个大小；从这里修改内联元素和块元素之间的差异

于 2020-12-21T14:45:11.973 回答
0

试试这个：

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/

于 2016-03-17T05:25:46.007 回答
0

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

你的CSS会是这样的

h1 {
text-align: center;
background-color: green;
width: 600px;
 }
于 2018-11-12T05:41:19.647 回答
0

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

在 codepen 上演示

于 2019-01-23T15:02:20.183 回答
0

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; 
}
于 2019-11-24T23:17:54.987 回答
-2 

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

于 2019-12-04T12:17:38.413 回答