如何在背景图片的两边使用<hr/>
创建居中的<h1>
?
我还需要它处理各种长度的文本,可以很好地缩放以方便移动查看,并使<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/>
■在单独存在<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网格系统的示例,但这不是问题/解决方案的一部分。
因此,有什么主意可以使我获得相同的外观和行为,但又没有背景色,因此它可以放在背景图像上?