如何在背景图像的<h1>
两侧<hr/>
创建居中?
我还需要它来处理各种文本长度,为移动查看很好地缩放,并<hr/>
使其容器的宽度达到 100%。
我想要这个外观,但在背景图像上。
对于两边都有线条的文本有很多答案(这里、这里 和这里) ,但它们都依赖于在文本后面使用纯色背景色,这对我来说不起作用,因为我想把这个on 有一个背景图像。
这是我实现上述外观的方法,它可以很好地处理各种长度的文本和缩放:
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>
我已经尝试过下面的方法,它有点工作,但它不能处理各种文本宽度或缩放,因为s<h1>
和<hr/>
s 在单独<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 网格系统的示例,但这不是问题/解决方案的一部分。
那么有什么想法可以让我获得相同的外观和行为,但没有文本的背景颜色,以便它可以位于背景图像上?