我正在努力完成下一个情况;
如果有一个h1标签，在它的右边我想要一个小行(separator.png)但是我的图像一直越过h1文本..http://i57.tinypic.com/2m30l51.png
我有一个例子，我需要它是;http://themes.webcreations907.com/ninezeroseven/option-two/prettyPhoto
那些标题:"Take a Look, Recent Works"
HTML是这样的;
<div class="titleBar">
<h1 class="left"><span>DIENSTEN</span></h1>
</div>
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
}
#diensten .titleBar h1{
display: inline-block;
}
如果尝试了很多事情，甚至从原始网站复制代码，但实际上我不知道该怎么做…有人能帮我一下吗?
感谢
所以我已经尝试了你们回答的所有问题。到目前为止，他们都没有为我工作。
;背景标签，聪明的想法，但我的页面背景是透明的。所以透明对透明是不行的。即使我将背景设置为透明，线条也会通过它发光。这个问题有什么解决办法吗?因为这是一个简单的方法来做背景标签。
第二;保罗·d的解决方案，我真的不明白…不够先进的猜测，尝试复制确切的代码和改变参数，使其适合我的编码，但没有工作…你能帮我让它适合我的编码吗?
给你的h1元素一个与页面背景相匹配的background元素。
#diensten .titleBar h1 {
background: #f00;
display: inline-block;
}
然后你可以通过引入一些正确的padding来分隔h1元素的行(这将扩展背景超过文本的末尾):
#diensten .titleBar h1 {
...
padding-right: 10px;
}
你的div titleBar是围绕h1标题，我不认为使用inline-block将解决这个问题。你应该把div:
<div class="titleWraper">
<h1>DIENSTEN</h1>
<div class="titleBar">
</div>
</div>
和你的CSS:
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
display: inline-block;
}
#diensten .titleWraper h1{
display: inline-block;
}
你可以得到同样的样式。但是，他们在h1标签周围使用了一些背景色，以避免显示剥离的行(用作标题栏的背景)。如果您对效果满意，请执行以下操作。在下面添加你的css样式，并检查下面的jsfiddle
.titleBar{
background:url('http://themes.webcreations907.com/ninezeroseven/option-two/wp- content/themes/ninezeroseven/assets/img/theme/sep.png') repeat-x 0 55%;
background-position:center;
padding-top:0;
}
.titleBar h1{
display: inline-block;
background-color:#f2f2f2;
}
http://jsfiddle.net/vapnF/
伪元素可以工作，虽然它需要额外的span，但如果需要，您可以省略图像。
Codepen。io演示