小编pha*_*awk的帖子

我遇到了CSS3渐变的跨浏览器渲染问题.当我尝试创建从透明颜色到白色的渐变时,会发生这种情况.

我用来测试的文件是:http: //f.cl.ly/items/0E2C062x3O161b09261i/test.html

使用的CSS是:

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);

在Safari 6(mac)中,Rending看起来像我想要的:

Chrome渲染在渐变为白色之前淡化为灰色(Firefox在mac os上也呈现这种方式):

关于为什么这个奇怪的渲染可能是什么想法或建议？