覆蓋覆蓋背景圖片的頂部的清晰文字？

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意味着一切看起來很清晰，但覆蓋層幾乎不可見。

來源

2016-04-29 thomas

我會將圖像放在: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>

來源

2016-04-29 23:07:45

它從來沒有發生，我認爲一個僞元素的半存在將是一個好處，好的。 – zer00ne

@ zer00ne它可以使用僅用於背景圖像的普通元素。主要思想是將「不透明」應用於特定元素，而不是影響其所有內容的容器。 –

沒有先生，你太謙虛了。我知道一個正常的元素可以履行相同的角色，但這是對父母的僞造。有一個優勢，我會找出（除了你之前提到的那個）。直到現在，我認爲僞限制是一種責任，謝謝。 – zer00ne

覆蓋覆蓋背景圖片的頂部的清晰文字？

回答

相關問題