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