如何在背景图像的两侧将<hr1居中放置<h1>

Question

如何创建中心<h1>与<hr/>两侧在一个背景图像？

我还需要它处理各种长度的文本，可以很好地缩放以进行移动查看，并<hr/>使其容器的宽度达到100％。

我想要这种外观，但要覆盖背景图片。

对于在两边带有线条的文本，有很多答案（在这里，在 这里和在这里），但是它们都依赖于在文本后面使用纯色背景色，这对我来说不起作用，因为我要放置此页面上有背景图片。

这是我实现上述外观的方式，该外观可以处理各种长度的文本并可以很好地缩放：

的CSS

.title-box {
    height: 2px; 
    background-color: rgb(215, 0, 0); 
    text-align: center;
}
.title-outer {
    background-color:rgb(230, 230, 230); 
    position: relative; 
    top: -0.7em;
}
.title-inner {
    margin:0px 20px; 
    font-size: 17.5px; 
    font-weight:bold; 
    color:rgb(100, 100, 100);
}

的HTML

<div class="title-box">
    <span class="title-outer">
        <span class="title-inner">OUR STORY</span>
    </span>
</div>

我曾尝试下面的方法，它样的作品，但它并不能很好地因处理各种文本的宽度或规模<h1>和<hr/>S IN单独为<div>S：

的HTML

<div class="row">
    <div class="span4"><hr /></div>
    <div class="span4"><h4>OUR STORY</h4></div>
    <div class="span4"><hr /></div>
</div>

注意：这是使用Bootstrap网格系统的示例，但这不是问题/解决方案的一部分。

因此，有什么想法可以使我获得相同的外观和行为，但又没有背景色的文本，因此它可以放在背景图像上？

Answer 1

不需要JS，这是一个纯CSS解决方案。

的CSS

.title-hr hr {
    display: inline-block;
    width: 30%;
    margin: 5px 10px;
    border-top: 1px solid #e5e5e5;
}

的HTML

<h1 class="title-hr"><hr />My Title<hr /></h5>

结果：http : //jsfiddle.net/yptmftr4/