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

【问题标题】：Multiple Images in background showing Invalid Property Value Error背景中的多个图像显示无效的属性值错误
【发布时间】：2016-04-23 05:21:58
【问题描述】：

查看我的网站 - 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 检查器中看到该错误

我能做什么？

【问题讨论】：

在你的帖子上说你使用了backgroundproperty，但在屏幕截图上说你使用了background-color
那是旧截图。我改变了那个。您可以再次查看该网站 - icestartup.com/testsites/site2 并尝试检查。您将再次看到错误。
对不起，由于我在手机上，所以现在帮不上忙……没有检查
要我发新的截图吗？
你可以试试，但是错误很明显，属性有问题，可能是html元素不支持或者属性有无效属性。

标签： html css wordpress

【解决方案1】：

代码中的主要问题是颜色属性。这是多张图片的 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

或者使用单独的背景图像标签，如您在上面链接中的示例中找到的那样。

【讨论】：

【解决方案2】：

您必须从代码中删除 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;
}

【讨论】：

哥们，你太棒了。解决了！
你有博客、网站之类的吗？我会跟着你
你可以在这里找到我，很高兴我帮助了你:)
@Adam 如果这对您有帮助，请接受作为答案。谢谢你:)
就这么做了。谢谢。