背景イメージをカバーするオーバーレイの上にテキストをクリアしますか？

Question

URL：http://www.universityhub.ph/

実際には、私が行っているプロジェクトのリードをキャプチャしているスプラッシュページです。

しかし、あなたはソースコードを見ることができます。

<div style="position: absolute; background: gray none repeat scroll 0% 0%; height: 1000px; width: 100%;"> 
     <div style="background:url(o-COLLEGE-GRADUATION-facebook.jpg);height:1000px;width:100%;"> 
    <div style="padding-top:88px;padding-left:67px;"> 
     <img src="emblemmatic-universityhub.ph-logo-11.png"> 
     <h1 style="font-size: 72px;">THE NEXT<br> BIG THING IS HERE</h1> 
     <h2 style="font-size: 18px;">OH, AND WE’RE LAUNCHING OUR OWN THING THAT’S PRETTY COOL.</h2> 

    </div> 
    <div> 
    <div>Get an electronic mail when it’s ready. 
    That’s right — no stamps required.</div> 
    <div></div> 
    </div> 
</div> 
</div> 

オーバーレイの透明度を低くすると、文字とロゴが少しぼやけて表示されます。今は不透明度が1.0に近く、すべてがはっきりしているように見えますが、オーバーレイはほとんど見えません。

Answer 1

透明度がコンテナの実際の内容に影響しないように、画像を:before要素に入れます。

body { 
 
\t color:#ffffff; 
 
\t font-family: roboto; 
 
} 
 
h1 {font-size: 72px;} 
 
h2 {font-size: 18px;} 
 
.content {padding: 88px 0 0 67px;} 
 
.background { 
 
    position: relative; 
 
    background: gray; 
 
    z-index: 0; 
 
    height: 1000px; 
 
    width: 100%; 
 
} 
 
.background:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: url(http://www.universityhub.ph/o-COLLEGE-GRADUATION-facebook.jpg); 
 
    z-index: -1; 
 
    opacity: 0.2; 
 
}

<div class="background" style=""> 
 
    <div class="content"> 
 
    <img src="http://www.universityhub.ph/emblemmatic-universityhub.ph-logo-11.png"> 
 
    <h1>THE NEXT<br> BIG THING IS HERE</h1> 
 
    <h2>OH, AND WE’RE LAUNCHING OUR OWN THING THAT’S PRETTY COOL.</h2> 
 
    </div> 
 
    <div> 
 
    <div>Get an electronic mail when it’s ready. That’s right — no stamps required.</div> 
 
    </div> 
 
</div>