css - 将背景添加到 h1，仅在 apty 空间上

Question

我正在努力达到这种效果

基本上，我希望标题的背景跨越可用空间，而不是在文本下方。问题是这需要是动态的，因为文本可以是多种语言。我不能简单地将另一个背景放在文本的单独跨度中，因为整个背景使用了图案图像，并且它不能只是根据文本的长度随机开始和停止。

我希望我说得够清楚！

编辑：由于这个例子不够清楚，这里是另一个：

Answer 1

把它<h1>放在一个包装纸里。

<div class="wrapper">
    <h1>This is some text</h1>
    <div class="background"></div>
</div>

然后将背景设置为table-cell100% 宽度。

div.wrapper {
    display: table;
    width: 100%;
}

div.wrapper h1 {
    font-family: sans-serif;
    font-size: 20px;
    color: #056;
    white-space: nowrap;
    margin: 0 1em;
}

.background {
    background-color: #000;
    display: table-cell;
    width:100%;
}

见演示。

Answer 2

只需将 h1 放入 div

<div class="header">
    <h1>Title</h1>
</div>

然后将其风格化http://jsfiddle.net/yh6Nn/

Answer 3

如果你想要一个纯 CSS hack，你可能想要探索:after伪元素和content属性。

http://jsfiddle.net/FYDXr/2/

不过，我不知道如何让它填满剩余的空间。

Answer 4

如果您想支持最大数量的浏览器，那么您需要添加一些额外的标记才能使其工作：

http://tinker.io/b6848

<h1><span>Header Text</span><span/></h1>

body {
    background: url(http://placekitten.com/600/400);
}

h1 {
    display: table;
    width: 100%;
}

h1 span {
    display: table-cell;
    white-space: pre;
}

h1 span:last-child {
    background: black;
    width: 100%;
}

有一种方法可以在不使用 Flexbox 的额外标记的情况下做到这一点，但它目前仅适用于 Chrome、Opera、IE10、启用了实验性 Flexbox 支持的 Firefox 版本，也许还有 Safari。