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

有两个问题。 spec for background如下：

[ <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;
}