Chrome表示多背景css无效

Question

我正在尝试设置多个CSS背景，并在Chrome中进行测试，结果显示此样式是无效的属性值。

它带有黄色的感叹号图标和开发工具中的删除线：

这是样式：

.illyBody{
    background:transparent url(night_body.png) bottom left repeat-x, #27235b url(night_stars.png) 16px left repeat-x !important;
    background:transparent url(night_body.svg) bottom left repeat-x, rgb(39, 35, 91) url(night_stars.svg) 16px left repeat-x !important;
}

什么是无效的呢？

Answer 1

有2个问题。该背景规格如下：

[ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> 
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

请注意，仅<final-bg-layer>包含<'background-color'>。因此，属性中的第一个背景不能像您的颜色那样具有颜色（透明）。

然后在关于background position您的部分中将看到以下内容：

请注意，一对关键字可以重新排序，而关键字和长度或百分比的组合则不能。因此，“左中心”有效，而“左50％”无效。

您所拥有的16px left是向后的，并且此注释所提及的无效。因此，考虑到这两个问题，css将如下所示：

.illyBody{
    background: url(night_body.png) bottom left repeat-x, #27235b url(night_stars.png) left 16px repeat-x !important;
    background: url(night_body.svg) bottom left repeat-x, rgb(39, 35, 91) url(night_stars.svg) left 16px repeat-x !important;
}