html - 在 h1 标签旁边获取背景 url 图片，不起作用

Question

我正在尝试完成下一种情况；

如果有一个 h1 标签，我想要一条小线 (separator.png)但是我的图像一直穿过 h1 文本.. http://i57.tinypic.com/2m30l51.png

我有一个例子说明我需要它是怎样的； http://themes.webcreations907.com/ninezeroseven/option-two/#prettyPhoto

那些标题:“看看，最近的作品”

HTML是这样的；

        <div class="titleBar">
            <h1 class="left"><span>DIENSTEN</span></h1>
            </div>

CSS；

  #diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;

}
#diensten .titleBar h1{
    display: inline-block;
}

如果尝试了很多东西，甚至从原始站点复制了代码，但实际上我不知道该怎么做。有人可以帮助我吗？

谢谢

更新

所以我已经尝试了你们回答的所有问题。到目前为止，他们都没有为我工作..

首先；背景标签，聪明的想法，但我的页面背景是透明的..所以透明对透明不起作用。即使我使背景透明，线条也会透过它发光。这个问题有什么解决办法吗？因为这是使用背景标记实现此目的的简单方法。

第二个；Paulie_D 的解决方案，我实际上不明白它。猜测不够先进，尝试复制确切的代码并更改参数以适合我的编码，但没有用。你能帮我让它适合我的编码吗？

Answer 1

只需为您的 h1 元素提供一个与页面背景匹配的 background。

#diensten .titleBar h1 {
    background: #f00;
    display: inline-block;
}

然后，您可以通过引入一些正确的 padding(这会将背景扩展到文本末尾之外)将行与 h1 元素隔开:

#diensten .titleBar h1 {
    ...
    padding-right: 10px;
}