即使使用供应商前缀，线性渐变在 Chrome 中也不起作用答案

【问题标题】：Linear gradient not working in Chrome even with vendor prefix即使使用供应商前缀，线性渐变在 Chrome 中也不起作用
【发布时间】：2013-09-06 03:05:52
【问题描述】：

我将其用作我的一个 div 的背景，并为所有的 div 声明了供应商前缀：

background: -webkit-linear-gradient(center top , #F6F6F6 0%, #FFFFFF 100%) repeat scroll;
background: -moz-linear-gradient(center top , #F6F6F6 0%, #FFFFFF 100%) repeat scroll;
background: -o-linear-gradient(center top , #F6F6F6 0%, #FFFFFF 100%) repeat scroll;
background: -ms-linear-gradient(center top , #F6F6F6 0%, #FFFFFF 100%) repeat scroll;
background: linear-gradient(center top , #F6F6F6 0%, #FFFFFF 100%) repeat scroll;

但是，它不在 Chrome 中。我的 div 变成了透明的（因为它根本无法识别背景）。我的 Chrome 版本是 Version 29，应该是最新的。

我做错了什么吗？

【问题讨论】：

呵呵，center top 语法正确吗？此外，对于非前缀版本，您可能希望改用 to bottom。 MDN.

标签： css google-chrome linear-gradients vendor-prefix

【解决方案1】：

正如 cmets 中已经提到的，center 是 linear-gradient 的无效属性。要深入了解语法，Mozilla Developer Network 很好地涵盖了这一点：

linear-gradient([<angle> | to <side-or-corner> ,]? <color-stop> [,<color-stop>]+)
                \--------------------------------/ \----------------------------/
                  Definition of the gradient line       List of color stops

top、bottom、left 和 right 是 <side-or-corner> 参数接受的唯一属性。

如果您无法手动处理渐变，有各种在线工具可以帮助您创建所需的渐变，其中比较好的工具之一是 Colorzilla 的 Ultimate CSS Gradient Generator。

【讨论】：