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

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

Answer 1

您可以使用CSS完成，请查看此链接 。

它在良好的浏览器中使用CSS3属性，在使用IE时使用IE的propriety 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

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