HTML/CSS渐变,在特定高度停止并继续使用纯色

Question

我想在HTML/CSS中使用渐变.

假设一些DIV总是超过400px高.我想添加渐变,使其在顶部为#FFFFFF,在300px时为#EEEEEE.所以第一个300px(高度方面)是一个很好的'白色到灰色'渐变.在300px之后,无论DIV有多高,我都希望背景颜色保持#EEEEEE.

我想这与渐变停止有关(？)

我该怎么做？

PS如果在IE中不可能我不在乎.如果gecko和webkit浏览器能够正确显示,我会很好.

Answer 1

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.

Answer 2

替代方式

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;

Answer 3

height: 400px;    
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));

您可能需要使用0.75,因为它是您身高的百分比,但这应该可以解决问题.