CSS 从透明到白色的 CSS3 渐变渲染问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11829410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 gradient rendering issues from transparent to white
提问by phawk
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.
我在跨浏览器呈现 CSS3 渐变时遇到问题。当我尝试创建从透明颜色到白色的渐变时会发生这种情况。
The file I am using to test with is: http://f.cl.ly/items/0E2C062x3O161b09261i/test.html
我用来测试的文件是：http: //f.cl.ly/items/0E2C062x3O161b09261i/test.html
CSS used is:
使用的 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%);
Rending looks like what I want in Safari 6 (mac):
Rending 看起来像我在 Safari 6 (mac) 中想要的：
Chrome rendering fades to gray colour before it fades to white (Firefox renders this way also on mac os):
Chrome 渲染在淡化为白色之前淡化为灰色（Firefox 在 mac os 上也以这种方式呈现）：
Any ideas or suggestions on why this odd rendering might be?
关于为什么会出现这种奇怪的渲染的任何想法或建议？
回答by wavetree
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%);
Instead of giving Chrome a "transparent" value, give it something very, very close to transparent. Hope this helps!
与其给 Chrome 一个“透明”的值，不如给它一些非常非常接近透明的东西。希望这可以帮助！
Edit: I forgot to post a link to my own version, which renders as expected in Chrome 21 (Windows 7).
编辑：我忘记发布指向我自己版本的链接，该链接在 Chrome 21 (Windows 7) 中按预期呈现。
回答by phawk
The CSS I pasted in here was wrong, I was editing the wrong file DOH!
我在这里粘贴的 CSS 是错误的，我正在编辑错误的文件 DOH！
Original CSS not working
原始 CSS 不起作用
background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
CSS that fixed the problem
解决问题的 CSS
background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
Problem being transparent isn't a colour, it is black with 0 alpha, setting to specifically white with 0 alpha fixes the issue. (thanks @carisenda)
问题是透明不是一种颜色，它是带有 0 alpha 的黑色，设置为带有 0 alpha 的特定白色可以解决这个问题。（感谢@carisenda）
This still points on inconsistencies with how browser vendors are dealing with alpha transparency in CSS3 gradients.
这仍然指向浏览器供应商如何处理 CSS3 渐变中的 alpha 透明度的不一致。
回答by WEBjuju
The trick with a color besides white (and with white actually) is to rgbathe actual color that is fading.
除了白色之外的颜色（实际上是白色）的技巧rgba是褪色的实际颜色。
background-image: linear-gradient(to right,
rgba(111,174,249, 0) 0%,
rgba(111,174,249, 0) 80%,
rgb (111,174,249) 100%);
In case the color being used is hex (like #6faef9) use a hex to rgba converterto convert the color.
如果使用的颜色是十六进制（如#6faef9），请使用十六进制到 rgba 转换器来转换颜色。
