如何做中心< h1>使用< hr />在背景图像两侧 [英] How to do centered <h1> with <hr/> on both sides over a background image

问题描述

如何在< hr /> 两边创建以< h1> 为中心 通过背景图片 ？

我还需要它来处理各种文本长度，适合移动查看并具有< hr /> 去其容器的100％宽度。

我想要这个外观，但是在背景图片上。

有有很多答案（，但他/她的回答由于某种原因消失了？我正在重新发布它（包括我制作的一些mod），因为这是我最终使用的解决方案。 Credit to due credit。

工作jsFiddle： http：/ /jsfiddle.net/pA5Gu/

HTML

 < div class =title-box> 
< fieldset class =title-outer> 
< legend id =titleInnerclass =title-inner>我们的故事< / legend> 
< / fieldset> 
< / div> 
  

CSS

  .title-box {
 background-image：url（'http://imagezo.com/images/1302-green-bubbles-awesome-background-wallpaper.jpg ）; 
身高：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 $ b

  $（document）.ready（function（）{
 var legendWidth = $（'＃titleInner'）。outerWidth（）; 
 var margin ='calc（（100％ - '+ legendWidth +'px）/ 2）'; 
 $（'＃titleInner'）。css（'margin-left'，margin）; 
 $（ '#titleInner'）.css（'margin-right'，margin）; 
}）; 
  

How do I create centered <h1> with <hr/> on both sides over a background image?

I also need it to handle various text lengths, scale well for mobile viewing and have the <hr/> go to 100% width of its container.

I want this look, but over a background image.

There are lots of answers (here, here here and here) for text with lines on either side but all of them rely on using a solid background colour behind the text, which doesn't work for me as the page I want to put this on has a background image.

Here is how I achieve the look above, which handles various lengths of text and scales well:

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>

I have tried the method below and it kind of works but it doesn't handle various text widths or scale well due to the <h1> and the <hr/>s being in seperate <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>

Note: This is example is using the Bootstrap grid system but that is not part of the problem/solution.

So any ideas how I can get the same look and behaviour but without the backgound colour for the text so it can sit over a background image?

解决方案

This code was posted originally by Arbel but his/her answer disappeared for some reason? I am reposting it (including some mods I've made) because it was the solution I ended up using. Credit where credit is due.

Working 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);
});

这篇关于如何做中心&lt; h1&gt;使用&lt; hr /&gt;在背景图像两侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！