如何重新創建此漸變不透明度，固定背景設計？

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; 
} 

的jQuery：

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

Answer 1

如果您查看源代碼，它不僅是d一個只有一個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的不透明度。

這幾乎是你如何把它在codepen（不是從問題的代碼），你只需要改變一點點的代碼，以適應它：

$(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>