背景出發，在一個給定的百分比

我試圖創建可變高度的DIV這將有2種背景顏色：背景出發，在一個給定的百分比

一個背景從頂部覆蓋其整個表面
一個背景開始30％的窗口和哪個高度將是窗口的70％（而不是div）。此背景將固定在滾動上。

我已經嘗試了一切，仍然無法找到一個很好的方法來做到這一點，即使在玩背景圖像時也是如此。如果可能，我想避免position: fixed。並堅持與background-attachment: fixed。

這裏是我的效果想獲得：http://jsbin.com/gabuvakegane/1/

有什麼辦法，我可以這樣很容易做到，一個體面的瀏覽器支持（需要IE9）？

來源

2014-09-20 Ronan

解釋多的是，你想做什麼？ – Yehia 2014-09-20 23:44:40

我想重新創建我在jsbin中顯示的效果，而不使用'position：fixed'。（並找到一種方法來做到這一點與'background-attachment：fixed'） – Ronan 2014-09-21 06:26:10

您發佈的示例使用固定位置div，並使用a：before設置輔助顏色。

所以代碼很簡單。

HTML

<div class="wrapper"> 
    <div class="inner-wrapper"> 
     YOUR INTERNAL STUFF/CONTENT GOES HERE 
    </div> 
</div>

CSS

.wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color:pink; 
    overflow: scroll; 
    z-index: 1; 
} 
.inner-wrapper { 
    z-index: 10; 
} 
.wrapper:before { 
    content: ''; 
    position: fixed; 
    top: 30%; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    background-color: green; 
    z-index: -1; 
}

小提琴：http://jsfiddle.net/6zcx8q2a/

來源

2014-09-21 00:33:19 trattles

謝謝，但我想避免使用'position：fixed'，而是使用'background-attachment：fixed'如果可能的話 – Ronan 2014-09-21 06:27:08

這是可能的，但那麼你不能指定窗口高度的百分比。如果你想使用窗口高度的百分比，哦需要使用固定的。如果你不想使用固定的，那麼你將需要使用一些其他的高度，並將不能確保你的「從頂部30％」的要求沒有一些JavaScript。 – trattles 2014-09-21 16:04:48

背景出發，在一個給定的百分比

回答

相關問題