css - 具有图像和扩展渐变的背景的无效 CSS 属性值

Question

Chrome 已开始就我的遗留渐变向我发出警告:

Invalid CSS property value: right no-repeat url('../Images/Logo_white.png'), 
-moz-linear-gradient(bottom, #899fa6, #3e545c) 

它仅适用于 o、moz 和 ms 的扩展名:

background: right no-repeat url('../Images/CompanyLogo.png'), 
-moz-linear-gradient(bottom, #000000, #ffffff);

webkit 的那个很好:

background: right no-repeat url('../Images/CompanyLogo.png'), 
-webkit-linear-gradient(bottom, #000000, #ffffff);

我做错了什么吗？

单独使用扩展渐变不会生成警告，而不是与图像结合使用。

Answer 1

您从 Chrome 的开发工具收到警告的原因是这些值对于 Chrome 确实无效。但是，这不应该让您感到 panic ，因为这就是它的设计方式。

在 CSS 中，如果某些内容定义不正确或未被浏览器识别，则它会被简单地忽略，什么都不做，它只会给出警告而不是错误。这种行为正是允许供应商前缀起作用的原因。以你自己的情况为例:

background: right no-repeat url('../Images/CompanyLogo.png'), 
-moz-linear-gradient(bottom, #000000, #ffffff);

background: right no-repeat url('../Images/CompanyLogo.png'), 
-webkit-linear-gradient(bottom, #000000, #ffffff);

background: right no-repeat url('../Images/CompanyLogo.png'), 
linear-gradient(bottom, #000000, #ffffff);

Chrome 遍历每个 background 属性并查看它可以解释哪一个。它无法解释第一个渐变，因为它无法像 Firefox 那样识别 -moz-。它可以解释第二个，因为它有一个-webkit- 前缀。它可以也解释第三个背景，因为 Chrome 支持无前缀的 CSS 渐变。

由于不止一个 CSS 属性影响同一事物(背景)，因此将使用列出的最新一个(无前缀版本)。对于未解释的第一个 background 将显示警告，但不会对元素产生任何影响。

是的，应该查看和分析警告，通常将其视为错误。话虽如此，您提出有关浏览器前缀的案例是正确的做法，因此应该接受警告。在一个完美的世界中，他们根本不会出现，他们会明白这是为另一个浏览器准备的，但没有理由担心，因为这确实是正确的做法

但话又说回来，这都是半不相关的，因为 all major browsers support CSS gradients unprefixed .