我想要的是绿色背景刚好在文本的后面,而不是100%的页面宽度。这是我当前的代码:
h1 { text-align:中心; 背景颜色:绿色; } <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>
我想要的是绿色背景刚好在文本的后面,而不是100%的页面宽度。这是我当前的代码:
h1 { text-align:中心; 背景颜色:绿色; } <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>
当前回答
将文本放入内联元素中,例如<span>。
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
然后在内联元素上应用背景色。
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
内联元素和它的内容一样大,所以这应该可以帮你。
其他回答
将文本放入内联元素中,例如<span>。
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
然后在内联元素上应用背景色。
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
内联元素和它的内容一样大,所以这应该可以帮你。
试试这个:
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/
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;
}
背景设置为元素的整体大小; 从这里修改内联元素和块元素之间的区别
你可以使用HTML5 <mark>标记。
HTML:
<h1><mark>The Last Will and Testament of Eric Jones</mark></h1>
CSS:
mark
{
background-color: green;
}