CSS3渐变渲染问题从透明变为白色 [英] CSS3 gradient rendering issues from transparent to white

问题描述

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

I am having issues with cross browser rendering of CSS3 gradients. This is happening when I am trying to create a gradient from transparent colour to white.

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

The file I am using to test with is: 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 looks like what I want in Safari 6 (mac):

Chrome渲染先变为灰色，然后再逐渐变为白色(Firefox在Mac OS上也是如此):

Chrome rendering fades to gray colour before it fades to white (Firefox renders this way also on mac os):

为什么会有这种奇怪的渲染的任何想法或建议?

Any ideas or suggestions on why this odd rendering might be?

推荐答案

我也遇到了这个问题.我不确定为什么会发生这种情况，但这是我在自己的项目中使用的解决方法:

I've encountered this as well. I'm not sure why it happens, but here's what I've used in my own projects as a workaround:

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

与其给Chrome一个透明的"值，不如给它一个非常非常接近透明的值.希望这会有所帮助！

Instead of giving Chrome a "transparent" value, give it something very, very close to transparent. Hope this helps!

我忘记发布指向我自己的版本的链接，该链接会在Chrome中按预期显示21(Windows 7).

I forgot to post a link to my own version, which renders as expected in Chrome 21 (Windows 7).

这篇关于CSS3渐变渲染问题从透明变为白色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！