在覆蓋背景圖片的疊加層上清除文字？

Question

網址： 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 { color:#ffffff; 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>