CSS Chrome 和 Safari 浏览器中的线性渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11693580/
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
Linear gradient in Chrome and Safari browsers
提问by codelove
I am having trouble showing a linear gradient in Safari and Chrome. In Firefox it shows up fine.
我在 Safari 和 Chrome 中无法显示线性渐变。在 Firefox 中它显示良好。
I am trying:
我在尝试：
background: -webkit-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
Thanks you for your help.
谢谢你的帮助。
回答by Zoltan Toth
Try this - http://jsfiddle.net/fwkgM/1/
试试这个 - http://jsfiddle.net/fwkgM/1/
background-color: #9e9e9e;
background-image: linear-gradient(to bottom, #9e9e9e, #454545);
回答by Rega
You can also try this:
你也可以试试这个：
http://www.colorzilla.com/gradient-editor/
http://www.colorzilla.com/gradient-editor/
It's a pretty good CSS3 gradient generator. It has worked well for me. Hope it helps you too! :D
这是一个非常好的 CSS3 渐变生成器。它对我来说效果很好。希望对你也有帮助！:D
回答by kay
For Cross browser compatibility try the following
对于跨浏览器兼容性，请尝试以下操作
background-color: #9e9e9e; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(bottom, rgb(213,12,18), #9e9e9e 40%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image: -moz-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For Firefox (3.6 to 15) */
background-image: -o-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* Standard syntax; must be last */
回答by destresa
background-attachment: fixed; /* worked for me */
回答by Brian Sanchez
background: -webkit-linear-gradient(left,transparent,black 50%,transparent); /* worked for me*/
