不透明度のないオーバーレイ四角の中央のテキスト

Question

私は背景画像を持つ四角形を作成しました。余分なdivでオーバーレイし、そのdivの上にテキストがあります。今私はz-indexとposition: relativeを使って正しく取得できると思ったが、うまくいかなかった。目標は黒いオーバーレイの上にテキストを表示することです。

私はテキストの不透明度をダウンスケールしたくないことに注意してください。ここで

は私のコードで、デモのためにここにJSFIDDLE

.image-holder { 
 
    width: 275px; 
 
    height: 274px; 
 
    display: inline-block; 
 
    position: relative; 
 
    z-index: 13; 
 
    background-color: blue; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    margin-bottom: 20px; 
 
} 
 

 
h2.offer-image-title { 
 
    color: red; 
 
    border: 0; 
 
    text-align: center; 
 
    font-size: 36px; 
 
    display: inline-block; 
 
    padding: 0; 
 
    margin: 0; 
 
    padding-top: 32%; 
 
    position: relative; 
 
    z-index: 15; 
 
} 
 

 
.offer-image { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.offer-1 { 
 
    background-image: url(http://www.wnd.com/files/2015/03/chuck_norris300x300-275x275.jpg); 
 
} 
 

 
.overlay-black { 
 
    background-color: black; 
 
    opacity: 0.5; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 14; 
 
}

<div class="image-holder"> 
 
    <div class="offer-image offer-1"> 
 
    <div class="overlay-black"></div> 
 
    <h2 class="offer-image-title">Chuck Norris</h2> 
 
    </div> 
 
</div>

Answer 1

オーバーレイに背景画像とともにlinear-gradient() + rgba()を使用し、フレックスボックスでテキストの中央に配置することができます。

.image-holder { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(https://i.stack.imgur.com/rFpk9.jpg); 
 
    background-size: 100%, cover; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white; 
 
}

<div class="image-holder"> 
 
    <h2>Chuck Norris</h2> 
 
</div>

Answer 2

あなたh2は絶対位置と左/トップの場所を必要とする参照してください。

h2.offer-image-title { 
color: red; 
border: 0; 
text-align: center; 
font-size: 36px; 
display: inline-block; 
padding: 0; 
margin: 0; 
padding-top: 32%; 
position: absolute; 
z-index: 15; 
top: 0px; 
left: 0px; 
} 

Answer 3

私は私は背景画像を持つ正方形を作りました。余分な、私はテキストをしたいdivの上に。他の答えにあなたのコメントを見た後、私は削除：

.image-holder{ 
 
\t width:275px; 
 
\t height:274px; 
 
\t display:inline-block; \t 
 
\t position:relative; 
 
\t z-index:13; 
 
\t background-color:blue; 
 
\t margin-left:20px; 
 
\t margin-right:20px; 
 
\t margin-bottom:20px; 
 
} 
 
h2.offer-image-title{ 
 
    width: 100%; 
 
\t color:red; 
 
\t border:0; 
 
\t text-align:center; 
 
\t font-size:36px; 
 
\t display:inline-block; 
 
\t padding:0; 
 
\t margin:0; 
 
\t padding-top:32%; \t 
 
\t position:relative; 
 
\t z-index:15; 
 
} 
 
.offer-image{ 
 
\t width:100%; 
 
\t height:100%; 
 
\t position:relative; 
 
} 
 
.offer-1{ \t 
 
\t background-image: url(http://www.wnd.com/files/2015/03/chuck_norris300x300-275x275.jpg); 
 
} 
 
.overlay-black{ 
 
\t background-color: rgba(0, 0, 0, 0.5); 
 
\t position:relative; 
 
\t top:0; 
 
\t left:0; 
 
\t width:100%; 
 
\t height:100%; 
 
\t z-index:14; 
 
}

<div class="image-holder"> 
 
    <div class="offer-image offer-1"> \t \t \t \t \t \t \t 
 
    <div class="overlay-black"> 
 
     <h2 class="offer-image-title">Weight lifting</h2> 
 
    </div> \t \t \t \t \t 
 
    </div> 
 
</div>

EDIT：

一つの解決策は、h2がネストされたdivの内側に座って、あなたの持っていることですopacityの規則を内部からdivと置き換え、代わりにrgbabackground-colorの値はh2の不透明度に影響を与えずに同じ結果を得ることができます。また、h2にwidth:100%を追加すると、text-align: centerが機能します。