如何让这个渐变出现在 Mac 和 Windows 上的 Chrome 上？答案

【问题标题】：How do I make this gradient appear on Chrome on mac and windows?如何让这个渐变出现在 Mac 和 Windows 上的 Chrome 上？
【发布时间】：2013-06-07 22:15:02
【问题描述】：

我有以下css：

background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.1) 0px, rgba(0, 0, 0, 0.1) 100%) repeat scroll 0 0 #66BAC0;
background: -webkit-linear-gradient(center top , rgba(255, 255, 255, 0.1) 0px, rgba(0, 0, 0, 0.1) 100%) repeat scroll 0 0 #66BAC0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66BAC0', endColorstr='#66BAC0');

-moz-linear-gradient 出现在 windows 和 mac 上的 firefox 上。 -webkit 不适用于 mac 和 windows。我不确定我做错了什么。我是新手。

谁能帮我弄清楚为什么它不显示？

【问题讨论】：

除了前缀属性或值之外，还应始终使用无前缀属性或值。
目前 Firefox 还支持新的标准无前缀语法 developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient。 Chrome 也是如此。

标签： css button linear-gradients

【解决方案1】：

试试这个：

background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0px, rgba(0,0,0,0.1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0px,rgba(255,255,255,0.1)), color-stop(100%,rgba(0,0,0,0.1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(255,255,255,0.1) 0px,rgba(0,0,0,0.1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

使用Colorzilla's Gradient Generator创建

【讨论】：

感谢@DACrosby。但是如何在这些行中添加背景颜色？
在css顶部设置background: red;来添加颜色。这样，如果支持渐变，它将被覆盖
ColorZilla 生成的 cmets 具有误导性。对标准语法的支持确实好多了 - 请参阅caniuse.com/#feat=css-gradients Safari 和移动 WebKit 浏览器是目前唯一不支持它的浏览器。