css - 在 FireFox 中有效 在 Chrome 中无效？背景图像：线性渐变（到底部，rgb（53、53、53）、rgb（34、34、34））；

Question

background-image: linear-gradient(to bottom, rgb(53, 53, 53), rgb(34, 34, 34));

为什么这个 CSS 属性在 Chrome 中无效但在 Firefox 中有效？以及有关如何使其在两种浏览器中均有效的任何建议？

Answer 1

Chrome 使用不同的代码将其渲染为背景渐变。

您可以在此处找到代码示例

Answer 2

您需要使用浏览器特定的供应商前缀。

我通常使用一个生成器，它会为你提供所有浏览器的代码。

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

Answer 3

WebKit 已更新以匹配规范语法，因此您应该像这样获得最大的浏览器支持：

background: -webkit-gradient(linear, center top, center bottom, from(#917c4d), to(#ffffff));
background: -webkit-linear-gradient(#917c4d, #ffffff);
background: -moz-linear-gradient(#917c4d, #ffffff);
background: -o-linear-gradient(#917c4d, #ffffff);
background: -ms-linear-gradient(#917c4d, #ffffff);
background: linear-gradient(#917c4d, #ffffff);