Chrome最新更新后，我使用的后台css不再起作用答案

【问题标题】：After Chrome's latest update, the background css I use no longer worksChrome最新更新后，我使用的后台css不再起作用
【发布时间】：2016-01-16 21:02:25
【问题描述】：

下面是 chrome 调试器抱怨的那一行，它说它是无效的。此行在更新之前有效，我的更多用户在更新浏览器时开始遇到同样的问题。

background: url(https://www.playinitium.com/images/banner---town.jpg) 50% 50% / contain no-repeat rgb(30, 43, 83), rgb(30, 43, 83);

不喜欢这行的Chrome版本是：Version 46.0.2490.71 m

是否有人知道任何不允许此背景 CSS 行工作的规范更改？

编辑

后来我意识到 chrome 表示背景 CSS 的方式与我设置它的方式不同。设置方法如下：

background: url('images/effects/light-rain1.gif') no-repeat center center, url('"+bannerUrl+"') no-repeat center center, rgba("+r+", "+g+", "+b+", "+amount+")

        background-blend-mode: screen, multiply
        background-size: contain,contain,contain

我有 2 台计算机，其中一台装有最新的 Chrome，它似乎没有混合，另一台装有稍早版本的 chrome。

知道我使用 jQuery 动态设置它也可能是相关的。

编辑 2

我只是比较了两个 Chrome 之间的版本（一个有效的和一个无效的），它们是相同的！唯一的区别是在更新我的 chrome 后立即开始失败的那个。

太奇怪了。

【问题讨论】：

Protip：在指责浏览器之前尝试验证您的代码。
@cimmanon：“但它在 Chrome 中有效，所以它必须有效！”
@cimmanon 我很抱歉。我没有意识到 chrome 向我显示的背景 CSS 值与我设置的值不同。我更新了我的问题！
嗯，这改变了一切。我仍然看不出您在脚本中设置它的方式可能如何表示 Chrome 表示它的方式。
@BoldClock 我知道对吗？我认为 jQuery 在解释某些值时确实做了一些“魔术”。也许它与此有关？

标签： css google-chrome

【解决方案1】：

根据w3school

CSS3 多背景

CSS3 允许你添加多个背景元素的图像，通过 background-image 属性。

不同的背景图片用逗号隔开，图像堆叠在一起，其中第一张图像是离观看者最近。

但是，您的背景属性无效。 Chrome 可能会修复此错误。您可以通过删除第二个背景值来解决问题。

background: url(https://www.playinitium.com/images/banner---town.jpg) 50% 50% / contain no-repeat rgb(30, 43, 83);

【讨论】：

【解决方案2】：

你有两个背景颜色值：

... no-repeat rgb(30, 43, 83), rgb(30, 43, 83);

自从you may only have one color layer and it must be declared last 以来，这从来都不是有效的 CSS。这在a decade 中没有改变，但我不能说我很惊讶 Chrome 一直在接受它。

要修复，请删除rgb(30, 43, 83) 值之一：

... no-repeat, rgb(30, 43, 83);

最好是逗号：

... no-repeat rgb(30, 43, 83);

声明对一个颜色值有效，带或不带逗号，但其含义略有不同，最终结果基本相同。一般来说，如果你只有一张背景图片，你把颜色和图片放在同一层。这将提高与不支持分层背景的浏览器的兼容性，无论如何您都没有真正尝试实现。

【讨论】：

【解决方案3】：

事实证明这确实是一个 Chrome 错误。其他人已经开始在这里报告这个问题：

https://code.google.com/p/chromium/issues/detail?id=543583

【讨论】：