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

哈克但是，也许是这样的:

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