加入分隔符和标题

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 here 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/

Answer 2

看到此链接，我希望这对您有所帮助。 jsfiddle.net/HR2Xa/3 /