如何在背景图片的两边使用<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网格系统的示例,但这不是问题/解决方案的一部分。

因此,有什么主意可以使我获得相同的外观和行为,但又没有背景色,因此它可以放在背景图像上?

===============>>#1 票数:5

不需要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/

===============>>#2 票数:2

好的,我已经使用了这段代码,这是我的解决方案。 是的,这有点脏,因为我使用过:before:after ,但是可以使用。

的HTML

<div class="title-box">
    <span id="first" class="title-inner">OUR LOOOoo oooo oOONG STORY</span>
</div>
<div class="title-box">
    <span id="second" class="title-inner">OUR STORY</span>
</div>
<div class="title-box">
    <span id="third" class="title-inner">STORY</span>
</div>

的CSS

.title-box {
    text-align: center;
}
.title-inner {
    margin:0px 20px;
    font-size: 17.5px;
    font-weight:bold;
    position: relative;
    color:rgb(100, 100, 100);
}
.title-inner:after, .title-inner:before {
    content:"";
    float: right;
    position: relative;
    top: 8px;
    height: 2px;
    background: red;
}
.title-inner:before {
    float: left;
}

jQuery的

$(document).ready(function () {

    function work() {
        $(".title-inner").each(function () {
            var full_width = $(window).width();
            var id = $(this).attr("id");
            var title_width = $("#" + id).width();
            var new_width = (full_width - title_width) / 2 - 40;
            $('head').append("<style>#" + id + ":before, #" + id + ":after{width:" + new_width + "px !important;}</style>");
        });
    }
    work();
    $(window).resize(function () {
        work();
    });
});

http://jsfiddle.net/ffb3X/4/

因为:before:after不是DOM的一部分,所以我使用.append()函数在每个标题的头部附加样式标签。

此代码将在页面加载时计算所有内容,因此具有响应能力。

===============>>#3 票数:2 已采纳

该代码最初由Arbel发布,但由于某种原因他/她的答案消失了? 我将其重新发布(包括我制作的一些模块),因为这是我最终使用的解决方案。 贷方到期的贷方。

可用的jsFiddle: http//jsfiddle.net/pA5Gu/

的HTML

<div class="title-box"> 
    <fieldset class="title-outer">
            <legend id="titleInner" class="title-inner">OUR STORY</legend>
    </fieldset>
</div>

的CSS

.title-box { 
    background-image: url('http://imagezo.com/images/1302-green-bubbles-awesome-background-wallpaper.jpg');
    height:100%;
}
.title-outer {
    border-top:2px solid rgb(215, 0, 0);
    background-color: transparent;
}
.title-inner {
    width:auto;
    padding:0px 20px;
    border: 0;
    background-color: transparent;
    font-size: 17.5px; 
    font-weight:bold; 
    color:rgb(255, 255, 255);
}

jQuery的

$(document).ready(function() {
    var legendWidth = $('#titleInner').outerWidth();
    var margin = 'calc((100% - '+legendWidth+'px) / 2)';
    $('#titleInner').css('margin-left', margin);
    $('#titleInner').css('margin-right', margin);
});

===============>>#4 票数:0

http://jsfiddle.net/habo/HrfuH/1/

<div class="title-box">
    <div class="myContent">
    <div class="title-outer"><hr /></div>
    <div class="title-inner "><h4>OUR STORY</h4></div>
    <div class="title-outer"><hr /></div>
    </div>
</div>


.myContent{
    display:block;
    width:600px;
    margin:0 auto;
}
.title-box {
    background:#eee;
    height:60px;
}
.title-outer{

}

hr {
    height: 2px;
    background-color:rgb(215, 0, 0);
    margin: 2em 0;
    width:25%;
    float:left;
}

.title-inner {
    margin:0px 20px; 
    font-size: 17.5px; 
    font-weight:bold; 
    color:rgb(100, 100, 100);
    float:left;
}

  ask by Dhaust translate from so

未解决问题?本站智能推荐: