html - 用线样式化标题

Question

在某种程度上这很简单，但我已经尝试弄清楚这个问题已经好几个小时了，所以我决定把问题写下来，也许在您的帮助下我可以找到解决方案。

在布局标题 (h1, h2, h3) 旁边有一行。基本上是这样的:

示例标题----------------------------------------

另一个标题示例--------------------------------

再来一个---------------------------------------- ----------

这就是最终结果(----- 是 gfx 作为背景图像)。你会怎么做？背景颜色可能会改变和/或具有不透明度。

我在想的一件事是:

<h1><span>Example Heading</span></h1>

当 CSS 看起来像这样时:

h1 {
background-image: url(line.png);
}
h1 span {
background: #fff;
}

但由于背景颜色可能不是白色 (#fff)，因此不起作用。

希望你能理解我的问题:D

Answer 1

Hacky 但是，也许是这样的:

HTML:

<h1>
    <span>Test</span>
    <hr>
    <div class="end"></div>
</h1>

还有CSS:

h1 span{ float :left; margin-right: 1ex; }
h1 hr {
    border: none;
    height: 1px;
    background-color: red;
    position: relative;
    top:0.5em;
}
h1 div.end { clear:both; }

Fiddle here