Question

下面是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版本为：版本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

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

非常奇怪。

Answer 1

您有两个背景颜色值：

... 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);

声明对于一个颜色值有效，有或没有逗号，但它具有明显不同的含义，基本上具有相同的最终结果。通常，如果您只有一个背景图像，则将图像的颜色放在同一图层中。这将改善与不支持分层背景的浏览器的兼容性，而这些浏览器并不是您真正想要实现的。

Answer 2

根据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);

Answer 3

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

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

在Chrome的最新更新后，我使用的后台css不再有效

3 个答案: