我想在HTML / CSS中使用渐变。
假设一些DIV总是超过400px高。我想添加渐变，使其在顶部为#FFFFFF，在300px时为#EEEEEE。因此，第一个300px（高度方面）是一个很好的'白色到灰色'渐变。在300px之后，无论DIV有多高，我都希望背景颜色保持#EEEEEE。
我想这与渐变停止有关（？）
我该怎么做？
附：如果在IE中不可能我不在乎。如果gecko和webkit浏览器能够正确显示，我会很好。
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
您可能需要使用0.75，因为它是您身高的百分比，但这应该可以解决问题。
background-color: #eee;
background-image: linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image: -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */
这是根据当前的Mozilla文档：https://developer.mozilla.org/en/CSS/-moz-linear-gradient。
我已经确认它适用于Firefox 3.6和Chrome 15。
替代方式
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
background-repeat:no-repeat;
background-size:100% 300px;
首先，很高兴知道你可以在渐变上使用2个以上的颜色停止，但你不能使用固定像素作为坐标，它必须是一个百分比。
在您的情况下，您可以简单地将第一个颜色停止定义为0％，将第二个颜色停止定义为50％左右。我建议你使用gradient generator，因为实现取决于浏览器。
我想出来了
background: #FFFFFF; /* old browsers*/
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE', GradientType=0); /* ie */
background: -moz-linear-gradient(top, #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
这对我有用
我刚才有同样的事情。我想在主要内容div上放置一个渐变，其高度在页面之间有很大差异。
我最终得到了这个并且效果很好（而且没有太多额外的代码）。
CSS：
.main-container {
position: relative;
width: 100%;
}
.gradient-container {
/* gradient code from 0% to 100% -- from colorzilla.com */
height: 115px; /* sets the height of my gradient in pixels */
position: absolute; /* so that it doesn't ruin the flow of content */
width: 100%;
}
.content-container {
position: relative;
width: 100%;
}
HTML：
<div class="main-container">
<div class="gradient-container"></div> <!-- the only thing added for gradient -->
<div class="content-container">
<!-- the rest of my page content goes here -->
</div>
</div>
我强烈建议使用colorzilla's gradient-editor生成CSS。它使跨浏览器优化变得非常简单（特别是如果您习惯使用Photoshop或Fireworks）。
解决该问题的最简单方法是简单地使用多个背景，并为背景的渐变部分提供定义的大小，以百分比或像素为单位。
body {
background: linear-gradient(to right, green 0%, blue 100%), green;
background-size: 100px 100%, 100%;
background-repeat: no-repeat;
background-position: right;
}
html,
body {
height: 100%;
margin: 0;
}根据需要混合并匹配浏览器前缀。
你可以这样做：
<div id="bgGen"></div>
然后
#bgGen{
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
margin-bottom:-400px;
}
这有点作弊，但它有效......
这对我有用
background: rgb(238, 239, 240) rgb(192, 193, 194) 400px;
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;
还有人评论为什么不只是制作渐变图像并将其设置为背景。我现在也更喜欢使用css，移动设计和访问者的数据使用有限，尽量限制尽可能多的图像。如果可以用css完成而不是它