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>

覆盖背景图像的叠加层顶部是否有明文？

1 个答案: