我想要的是绿色背景刚好在文本的后面,而不是100%的页面宽度。这是我当前的代码:
h1 { text-align:中心; 背景颜色:绿色; } <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>
我想要的是绿色背景刚好在文本的后面,而不是100%的页面宽度。这是我当前的代码:
h1 { text-align:中心; 背景颜色:绿色; } <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>
当前回答
你必须提到h1标签的宽度..
你的CSS是这样的
h1 {
text-align: center;
background-color: green;
width: 600px;
}
其他回答
可以使用html5标记标签内的段落和标题标签。
<p>lorem ipsum <mark>高光文本</mark> dolor sit.</p>
正如其他答案所指出的那样,您可以在文本周围的<span>中添加背景颜色以使其工作。
在有行高的情况下,你会看到空白。为了解决这个问题,你可以在你的跨度上添加一个盒子阴影。你还需要box-decoration-break: clone;FireFox才能正确渲染它。
编辑:如果你在IE11中遇到盒子阴影的问题,试着添加一个轮廓:1px纯色[color];也只适用于IE。
下面是它实际运行的样子:
.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>
编辑:下面的答案适用于大多数情况。然而OP后来提到,除了CSS文件,他们不能编辑任何东西。但我把这个留在这里,可能对其他人有用。
其他人忽略的主要考虑是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上的工作演示
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上的演示
很容易:
<p>lorem ibsum....</p>
样式:
p{
background-color: #eee;
display: inline;
}
背景设置为元素的整体大小; 从这里修改内联元素和块元素之间的区别