Question

由于此代码使用-moz供应商前缀，我认为它可以很好地使用-webkit或-ms，但它似乎不允许它：

background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);

我猜Mozilla允许不应该使用的东西，但是我的研究现在已经很难实现......

有什么想法吗？

Answer 1

删除center。然后它应该工作。

还要确保所有浏览器都有：

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);

Example Fiddle

Answer 2

线性渐变有一种新语法，第一个关键字就像(to bottom, etc)。

例：
http://jsfiddle.net/H8Byj/

div {
    background-image: linear-gradient(to bottom , rgba(0, 255, 255, 1) 0%, rgba(255, 0, 255, 1) 75%, rgba(255, 255, 0, 1) 100%);
}

我不知道带有前缀的旧语法在Firefox中仍处于活动状态，但根据Caniuse上的参考资料，新版本大约出现在Fx10-Fx15上。 ColorZilla CSS Gradient Generator将为您提供复古和多浏览器兼容性所需的所有声明。

线性渐变仅适用于-moz供应商前缀

2 个答案: