css - 将背景添加到 h1，仅在合适的空间上

Question

我正在努力实现这种效果

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

我希望我说得够清楚了!

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

Answer 1

把 <h1>在 wrapper 中。

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

然后将背景样式设置为 table-cell宽度为 100%。

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

参见 DEMO .