如何重新创建这种滚动时淡入淡出的不透明度，固定的背景设计

Question

有问题的设计是：http://hthworldwide.net/

我专门尝试重新创建着陆/英雄元素，该元素在滚动上淡化不透明度以显示背景中的固定图像。

我已经有点接近了，但我似乎无法确定这件事。问题是我无法让白色滤镜延伸到整个屏幕，而不为透明字母提供白色背景。理想情况下，您应该能够通过文本看到背景图像，如示例中所示。

这是我到目前为止所拥有的：http://codepen.io/rsprice/pen/reVazo

.html：

<div class="background"></div>
<div class="opacity-layer"></div>
<div class="text"></div>
<div class="other"></div>

.css：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.background {
  width: 3000px;
  height: 1000px;
  background-position: 0px -300px;
  background-size: 130%;
  box-sizing: border-box;
  z-index: -1;
  position: fixed;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  color: white;
  background: url('https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a9504411622da8e65df977606f82479c');
}
.opacity-layer {
  transform: rotateZ(360deg);
  -webkit-perspective: 1000;
  box-sizing: border-box;
  position: relative;
  width: 2000px;
  min-height: 100%;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
.text {
  height: 300px;
  width: 100%;
  background-position: center;
  background: url('http://hthworldwide.net/sites/all/themes/hthworldwide/style/images/home-intro.png') no-repeat;
  background-color: transparent;
  padding: 0;
  margin: 0;
}
.text img {
  margin: 0 auto;
}
.other {
  height: 2000px;
}

j查询：

$(window).scroll(function(){
  $(".opacity-layer").css("opacity", 1 - $(window).scrollTop() / 250);
});

Answer 1

如果你检查源代码，它不仅用一个div，而且用一个表来完成。

它看起来像这样：

+--+--------------------+--+
|  |                    |  |
+--+--------------------+--+
|  |  TRANSPARENT TEXT  |  |
+--+--------------------+--+
|  |                    |  |
+--+--------------------+--+

代码是这样的（简化）：

<div>
   <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td id="centerCell"></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
   <table>
</div>

该表中的所有单元格都具有白色背景，但中间的背景（包含带有透明文本的白色图像）。此外，中心单元格是唯一设置了宽度的单元格，因此其他单元格将占据表格/窗口的其余部分。然后，当页面滚动时，不是更改图像图层的不透明度，而是更改包含整个表的div的不透明度。

这几乎就是您在代码笔中的方式（而不是在问题中的代码中），您只需要更改一点代码以适应它：

$(window).scroll(function(){
  $(".container table").css("opacity", .95 - $(window).scrollTop() / 250);
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a9504411622da8e65df977606f82479c');
}
.container {
  width: 100%;
  background-position: 0px -300px;
  background-size: 130%;
  box-sizing: border-box;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  color: white;
  background:url(http://hthworldwide.net/sites/all/themes/hthworldwide/style/images/background-home-hk2.jpg);
}
#text {
  height: 300px;
  width: 980px;
  background-position: center;
  background: url('http://hthworldwide.net/sites/all/themes/hthworldwide/style/images/home-intro.png') no-repeat;
  background-color: transparent;
  padding: 0;
  margin: 0;
}
table {
  width: 100%;
  height: 100%;
  border:0;
  border-collapse:collapse;
  
}
td {
  opacity: .95;
  height:100px;
  background-color:white;
}
#footer { height:1000px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <table border="0">
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td id="text"></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
<div id="footer"></div>