0

由于此代码适用于 -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 允许一些不应该使用的东西，但我的研究到目前为止是徒劳的......

任何想法？

4

2 回答 2

2

删除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%);

示例小提琴

于 2014-01-29T18:09:51.110 回答
0

线性渐变有一种新语法，其中第一个关键字是 like (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将为您提供复古和多浏览器兼容性所需的所有声明。

于 2014-01-29T18:14:12.253 回答