覆盖覆盖背景图片的顶部的清晰文字？

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

覆盖覆盖背景图片的顶部的清晰文字？

回答

相关问题