如何让垂直渐变背景适用于所有浏览器？

Question

如果您要获得从白色到灰色阴影的垂直渐变背景，您会怎么做？

Answer 1

您可以使用CSS执行此操作，请查看this link。

它在良好的浏览器中使用CSS3属性，在使用IE时使用IE的适当性filter属性。

CSS

#gradient {
    background: #FFFFFF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#CCCCCC)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0 ); /* ie */
}

...产生... 的

Answer 2

background: url('vertical-gradient.jpg') repeat-x #eee

我建议在x轴上重复渐变图像，然后使用与底部渐变颜色匹配的纯色。在我的示例中，那将是#eee。

最终结果如下：

AAAAAA <- start gradient image
BBBBBB
CCCCCC
DDDDDD
EEEEEE <- end gradient image
EEEEEE <- start solid color until end of document

Answer 3

使其在所有浏览器中运行的唯一方法是使用图像。