行divのテキストをすぐに持って来る

こんにちは私は、テキストと、それをオーバーラップさせずにテキストを通過する必要がある行があります。行divのテキストをすぐに持って来る

ここ

は、私がこれまで持っているものである：ここで

が目標です

私は圧倒し、その背後にラインを入れてテキストを取得することはできませんいくつかの理由。私は自分自身でそれを理解するために最善を尽くしましたが、失敗したので、スタックオーバーフローに陥ることにしました。ここで

はHTMLです：

<div class="section-3-left"> 
    <div class="section-3-left-line"></div> 
    <div class="section-3-left-text"> 
    <p>CASE RESULTS</p> 
    </div> 
</div>

とCSS：任意の助けを大幅にapprechiatedされるだろう

jsfiddle

：ここ

.section-3-left { 
    width: 100%; 
    height: 500px; 
    position: absolute; 
} 

.section-3-left-text { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    width: 383px; 
    text-align: center; 
} 

.section-3-left-line { 
    position: absolute; 
    left: 0; 
    top: 250px; 
    height: 1px; 
    width: 102.8%; 
    background-color: #c61000; 
}

はjsfiddleリンクです。ありがとう！

出典

2017-03-26 cup_of

クラス-1に-section-3-left-line – Monicka

z-indexで遊ぶ。画像をシミュレートするために、background-colorを追加しました。行のz-indexを1に設定すると、テキストの上に赤い線が表示されます。私はこれが役立つことを願っています

.section-3-left { 
 
    width: 100%; 
 
    height: 500px; 
 
    position: absolute; 
 
} 
 

 
.section-3-left-text { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    width: 383px; 
 
    text-align: center; 
 
    background-color:green; 
 
} 
 

 
.section-3-left-line { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 250px; 
 
    height: 1px; 
 
    width: 102.8%; 
 
    background-color: #c61000; 
 
    z-index:-1; 
 
}

<div class="section-3-left"> 
 
    <div class="section-3-left-line"></div> 
 
    <div class="section-3-left-text"> 
 
    <p>CASE RESULTS</p> 
 
    </div> 
 
</div>

出典

2017-03-26 07:46:51 Monicka

を追加すると、緑の代わりに背景を透明にする方法はありますか –

イメージをそこに置き、背景色を削除します – Monicka

put –

<style> 
 
     .section-3-left { 
 
      width: 100%; 
 
      height: 500px; 
 
      position: absolute; 
 
     } 
 

 
     .section-3-left-text { 
 
      position: absolute; 
 
      top: 50%; 
 
      transform: translateY(-50%); 
 
      left: 0; 
 
      right: 0; 
 
      margin: 0 auto; 
 
      width: 383px; 
 
      text-align: center; 
 
     } 
 

 
     .section-3-left-line { 
 
      position: absolute; 
 
      left: 0; 
 
      top: 250px; 
 
      height: 1px; 
 
      padding-right: 40%; 
 
      background-color: #c61000; 
 
     } 
 

 
     .section-3-right-line { 
 
      position: absolute; 
 
      right: 0; 
 
      top: 250px; 
 
      height: 1px; 
 
      padding-left: 40%; 
 
      background-color: #c61000; 
 
     } 
 
    </style> 
 

 
<body> 
 
<div class="section-3-left"> 
 
    <div class="section-3-left-line"></div> 
 
    <div class="section-3-right-line"></div> 
 

 
    <div class="section-3-left-text"> 
 
     <p>CASE RESULTS</p> 
 
    </div>

出典

2017-03-26 07:47:19

私はこのルート、2つの別々の行に行かなければならないかもしれません。私はちょうど1行でそれをする方法があった場合疑問に思っていた –

.section-3-left { 
    width: 100%; 
    height: 500px; 
} 

.section-3-left-text { 
    position: relative; 
    text-align: center; 
    padding: 15px 0; 
} 

.section-3-left-text p { 
    background: #f3f5f6; 
    display: inline-block; 
    margin-top: -30px; 
    padding: 10px; 
} 

.section-3-left-text:before { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 1px; 
    left: 0; 
    margin-top: 8px; 
    background-color: #c61000; 
    z-index: -1; 
} 
<div class="section-3-left"> 

    <div class="section-3-left-text"> 
    <p>CASE RESULTS</p> 
    </div> 
</div>

フィドラーhttps://jsfiddle.net/ya9rvsbe/

出典

2017-03-26 08:03:57

あなたの答えのためにありがとうが、私はそれの背後にある画像を見ることができるように透明であるために段落の背景が必要 –

私はあなたが卑劣なと段落の背景はjsfiddleキャンバスの背景と同じ色になるので、透明になります。LOL：D –

。セクション-3左のテキストp { 背景：透明;}背景をこのように設定します –

これは、tはラインを作成し、それを作るために@mediaを使用してCSSとHTMLの使用2ダイブです応答

.section-3-left { 
    width: 100%; 
    height: 500px; 
    position: absolute; 
} 

.section-3-left-text { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    left: 0; 
    right: 0; 
    margin: 0 auto; 

    text-align: center; 
} 

.section-3-left-line { 
    position: relative; 
    left: 0; 
    top: 250px; 
    height: 1px; 
    width: calc(100% - 55%); 
    background-color: #c61000; 
} 
.section-3-right-line { 
    background-color: #c61000; 
    float: right; 
    height: 1px; 
    position: relative; 
    top: 250px; 
    width: calc(100% - 55%); 
} 
@media only screen and (max-width: 500px) { 
    .section-3-right-line{ 
     width: calc(100% - 70%)!important; 
    } 
    .section-3-left-line { 
     width: calc(100% - 70%)!important; 
    } 
} 
<div class="section-3-left"> 
<div class="section-3-left-line"></div> 
<div class="section-3-right-line"></div> 
<div class="section-3-left-text"> 
    <p>CASE RESULTS</p> 
</div>

出典

2017-03-26 08:31:53 Rammie

あなたの答えに感謝 –

あなたはコードの下に使用して、我々は.section-3-left-textの赤い線before and afterを割り当てるための異なるタグを望んでいないので、.section-3-left-lineは必要ありません見ることを達成できます。その代わりに、.section-3-left-textに擬似セレクタ:before and :afterを使用してスタイルを設定し、vwをpercentageとして整列させることはできません。この方法であなたのimageは、上記に沿って-とright and left-side borderbottomそしてtextで、以下のように

.section-3-left{ 
 
    width: 100%; 
 
    height: 300px; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
.section-3-left > img{ 
 
    width:100%; 
 
    height:100%; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    z-index:1; 
 
} 
 
.section-3-left > .section-3-left-text{ 
 
    position:absolute; 
 
    z-index:9; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    background:transparent; 
 
} 
 
.section-3-left > .section-3-left-text:before{ 
 
content:''; 
 
width:50vw; 
 
height:1px; 
 
background:red; 
 
position:absolute; 
 
z-index:2; 
 
top:50%; 
 
left:-50vw; 
 
transform:translate(0,-50%); 
 
} 
 
.section-3-left > .section-3-left-text:after{ 
 
content:''; 
 
width:50vw; 
 
height:1px; 
 
background:red; 
 
position:absolute; 
 
z-index:2; 
 
top:50%; 
 
right:-50vw; 
 
transform:translate(0,-50%); 
 
}

<div class="section-3-left"> 
 
    <div class="section-3-left-text"> 
 
    <p>CASE RESULTS</p> 
 
    </div> 
 
    <img src="http://placehold.it/1250x500"> 
 
</div>

チェックこのjsFiddleを試みるだろう。

出典

2017-03-26 08:50:29 frnt

私のプロジェクトでは、以前と同じ仕事をしていました。経験から、私はコードの多くの行でそれを達成するためのこの小さな回避策を持っています。

は、私がここでやった：

全ての要素がborder-boxように動作するためbox-sizingハックを実装（すなわち、パディングを含む）に、
は、画像の背景を持つ.wrapperボックスを作成しました。当社のコンテンツがラインと整列するtableレイアウトスタイルを使用し

.title

使用されるCSS擬似要素と背景のグラデーションを行きます
50％未満の幅を与えて行間を上げ、後で左右に引っ張って表示します（例：テキストの長さに関係なく）スペースを増やす
出血しないようにラインが含まれているように、.titleにパディングを追加しました。

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    background: #333 url(https://unsplash.it/1200/1000) 0 0 no-repeat/cover; 
 
    padding: 1.5em; 
 
    font-family: sans-serif; 
 
    color: rgba(255, 255, 255, .9); 
 
} 
 

 
.title { 
 
    display: table; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    padding: 0 2.5%; 
 
} 
 

 
.title:before, 
 
.title:after { 
 
    content: ''; 
 
    position: relative; 
 
    width: 45%; 
 
    display: table-cell; 
 
    background: linear-gradient(180deg, transparent, currentColor, transparent); 
 
    background-position: 50%; 
 
    background-repeat: repeat-x; 
 
    background-size: 1px auto; 
 
} 
 

 
.title:before { 
 
    right: 2.5%; 
 
} 
 

 
.title:after { 
 
    left: 2.5%; 
 
}

<div class="wrapper"> 
 
    <div class="title">Case Studies</div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, consequuntur in, laudantium molestiae dolore voluptate hic blanditiis illo. Reprehenderit fugit assumenda voluptates alias reiciendis eum culpa atque consectetur unde ipsum.</p> 
 
    <p>Quaerat tempore dolores harum quasi aliquam mollitia ipsum officiis. Provident voluptatem, alias atque, pariatur quae placeat ducimus nemo id repudiandae porro natus nobis maxime, impedit ipsum consequatur fugit error molestiae?</p> 
 
    <p>Necessitatibus eligendi, quis, itaque aperiam omnis veritatis quia sequi, ea officiis hic quasi, deserunt blanditiis? Nam eligendi molestias sit cum deleniti. Distinctio id ea blanditiis incidunt, voluptatum, commodi culpa suscipit.</p> 
 
</div>

で共有.titleビットイメージに近い見ては、同様に「フル・ページ」ビューでデモスニペットで自分を見てください飾られ。

私はそれが十分に答えることを願っています。乾杯、楽しい学習！

出典

2017-03-26 11:11:20

行divのテキストをすぐに持って来る

答えて

関連する問題