背景中的多个图像显示无效的属性值错误

Question

查看我的网站 - http://icestartup.com/testsites/site2/

背景应该是2个图像和背景颜色的图层。但是当我这样做时，它在Chrome检查器中显示“无效属性错误”。

这是我使用的代码：

body {
 background: url(http://icestartup.com/testsites/site2/wp-content/uploads/2016/04/gradient.png) no-repeat  scroll center top transparent, url(http://icestartup.com/testsites/site2/wp-content/uploads/2016/04/background-pattern.png) repeat scroll transparent, #90B601;
}

要查看我上传屏幕截图的确切错误 - 此图片中的Chrome检查器中可以看到错误

我该怎么办？

Answer 1

您必须从代码中移除transparent，因为它正在创建问题..

请使用以下代码：

body{
    background:url(http://www.icestartup.com/testsites/site2/wp-content/uploads/2016/04/gradient.png) no-repeat top center, url(http://www.icestartup.com/testsites/site2/wp-content/uploads/2016/04/background-pattern.png) repeat, #90B601;
}

Answer 2

代码中的主要问题是color属性。这是多个图像的css3背景标记的正确语法：

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

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} 

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

请注意，background-color仅允许在最终的背景图层中使用1。

你应该使用这样的东西：

background: url(http://icestartup.com/testsites/site2/wp-content/uploads/2016/04/gradient.png) no-repeat scroll center top, url(http://icestartup.com/testsites/site2/wp-content/uploads/2016/04/background-pattern.png) repeat scroll transparent

或者使用单独的背景图片标签，如上面链接中的示例中所示。