Chrome 和 Safari 浏览器中的线性渐变答案

【问题标题】：Linear gradient in Chrome and Safari browsersChrome 和 Safari 浏览器中的线性渐变
【发布时间】：2012-07-26 11:21:06
【问题描述】：

我无法在 Safari 和 Chrome 中显示线性渐变。在 Firefox 中它显示得很好。

我正在尝试：

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;

感谢您的帮助。

【问题讨论】：

标签： css cross-browser linear-gradients

【解决方案1】：

background-attachment: fixed; /* worked for me */

【讨论】：

【解决方案2】：

为了跨浏览器兼容性，请尝试以下操作

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 */

【讨论】：

【解决方案3】：

试试这个 - http://jsfiddle.net/fwkgM/1/

  background-color: #9e9e9e;
  background-image: linear-gradient(to bottom, #9e9e9e, #454545);

CSS3 Please

【讨论】：

我删除了-image 并且仍然有效，那你为什么要添加它？
我认为他这样做是因为他将背景图像与背景颜色分开。如果background-image 引用了一个不可访问的url，则后台仍将默认回退到background-color。在这种情况下，您发现将 background-image 更改为 background 仍然有效，这只是证明有不止一种方法可以给猫剥皮。
我只需要添加 -image 就可以在 safari 上使用倾斜/倾斜渐变：background-image: linear-gradient(135deg,#F9C665, #ef3429,...etc)

【解决方案4】：

background: -webkit-linear-gradient(left,transparent,black 50%,transparent); /* worked for me*/

【讨论】：

【解决方案5】：

你也可以试试这个：

http://www.colorzilla.com/gradient-editor/

这是一个非常好的 CSS3 渐变生成器。它对我来说效果很好。希望对你也有帮助！ :D

【讨论】：

那个渐变编辑器很棒。我是否忽略了一种使用标准 CSS 颜色名称指定颜色的方法？例如。 Lightslategray 等人。我可以轻松地在生成的渐变 CSS 中进行搜索和替换，以使用我想要的名称切换 rgba(xyza)，但生成的 IE9 SVG 数据是预先生成的。