html - 连接分隔符和标题

Question

我有一些代码来显示分隔符和标题

我目前有

.content-wrap {
    width: 1024px;
    margin: 0 auto;
}

.content-wrap section section {
    background: none;
    margin: 0;
}
.content-wrap section {
position: relative;
padding: 125px 0 25px 0;
background: url(http://www.lebiscuit.com.mx/section-sep.png) repeat-x left 25px;
}



h1 {
    font-size: 40px;
    float: right;
    line-height: 50px;
    letter-spacing: -0.9px;
    color: #ffffff;
    padding:25px 0;
}


body {background-color:#b0c4de;}

这是html

<div class="content-wrap">
     <section id="services" >
             <h1>title</h1>
    </section>    
</div>

所需的输出是

如何保留分隔符并将分隔符添加到h1？

请在此处找到 jsfiddle html

就像是

<h1 class="bck"></div>

.bck h1
{
float: right
margin: 10px
background-color:transparent;
}

Answer 1

由于您在该部分上使用相对定位，因此最好在标题 ( h1) 上使用绝对定位：

#services h1 {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    background-color: lightSteelBlue;
}

这样background-color边界线不会穿过标题。

http://jsfiddle.net/ExplosionPIlls/HR2Xa/2/