CSS：2種顏色的背景，水平分割，具有圖案？

Question

這就是我現在所擁有的：

background: #FFFFFF url("whitegrid.png") repeat left top;

Here's what I want to achieve.

如何實現這個分裂的背景效果，保持在兩種顏色的重複模式，使頂部顏色只填寫一個固定的百分比（例如30％）的頁面？

謝謝。

Answer 1

可能這可以幫助您：

Use CSS Gradient Generator

但要注意，這僅支持在現代瀏覽器

有時可以使2個格狀層：

<div class="gradient"> 
    <div class="pattern"> 
    </div> 
</div> 

Answer 2

演示：http://jsfiddle.net/techsin/VpyRy/1/show/

我不知道你問的是我的理解......但如果它聽起來那麼簡單，那麼背景是由兩個div組成的。你可以使用多個背景/圖像，但div在這裏更容易和合適。 http://jsfiddle.net/techsin/32gPX/

*{margin: 0;padding: 0;} 
html,body{width: 100%;height: 100%; position: relative;} 
body { background-color: red;} 
.nav {height: 50px; background-color: rgb(64, 47, 71);} 
.main { 
    width: 480px; padding: 40px; background-color: white; height: 400px; margin: auto; margin-top: 30px; 
} 

.white { 
    background-color: orange; width: 100%; height: 200px; 
    position: absolute; top: 50px; z-index: -1;}