0

背景画像の上に両側を中心<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>

以下の方法を試してみましたが、ある程度は機能しますが、とが別々の にあるため、さまざまなテキスト幅やスケールを適切に処理できません。<h1><hr/><div>

背景画像上のテキスト

HTML

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

注: これは Bootstrap グリッド システムを使用した例ですが、これは問題/解決策の一部ではありません。

同じ外観と動作を取得する方法はありますが、テキストの背景色を使用せずに背景画像の上に置く方法はありますか?

4

4 に答える 4

6

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/

于 2014-12-23T12:31:17.493 に答える
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);
});
于 2013-04-16T03:56:58.887 に答える