0

对，我不知道如何让这个渐变在 chrome 中工作：

background: linear-gradient(to bottom, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;

我了解 chrome 我需要使用一些 webkit 特定规则？

4

5 回答 5

0

我认为 webkit 前缀版本只是-webkit-linear-gradient。您的问题可能是您的第一个参数是“底部”而不是“底部”吗？

background: linear-gradient(to bottom, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;
background: -webkit-linear-gradient(top, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;

在此处查看此操作：http: //jsfiddle.net/KAD2E/

于 2012-12-07T20:22:27.867 回答
0

除了基于 Webkit 的浏览器之外，所有最近的浏览器都删除了前缀并实现了最新的语法：Fx（常规和 ESR）、IE 10、Opera 12.10。

对于 Chrome 和 Safari，您仍然需要旧语法，前缀。

不再需要原始语法（-webkit-gradient(linear, ...) ），因为需要它的浏览器几乎不再使用。

最后一点：执行此操作的标准方式必须始终是最后声明的属性。这样，对于实现它的浏览器，它总是优先于可能有问题的旧行为。

所以正确的写法是：

background: -webkit-linear-gradient(top, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;
background: linear-gradient(to bottom, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;

资料来源：MDN 上的线性梯度

于 2012-12-07T20:39:19.100 回答
0

您需要使用-webkit-供应商前缀（应该适用于所有浏览器to bottomtop）

background: -webkit-linear-gradient(top, rgb(25, 130, 185) 0%, rgb(3, 100, 150) 50%, rgb(1, 77, 117) 100%) repeat scroll 0% 0% transparent;
于 2012-12-07T20:16:03.670 回答
0

用于镀铬

-webkit-linear-gradient

另外，使用顶部而不是底部

于 2012-12-07T20:18:48.223 回答
0

我相信您仍然需要针对 Chrome 的 webkit 特定规则。试试这个语法：

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));

那应该对你有用。

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

于 2012-12-07T20:19:35.433 回答