CSS 背景图像上的属性值无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14378419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invalid Property Value on background-image
提问by Mike Earley
.up { background-image: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat; }
This code is giving me an 'invalid property value' in crome (and safari). I'm using the exact same code on another page, working correctly. I cleared my browser cache. If I remove 50% 50% no-repeat it works fine. Adding either of those 2 properties spikes it again to invalid (testing using developer tools).
这段代码在crome（和safari）中给了我一个“无效的属性值”。我在另一个页面上使用完全相同的代码，工作正常。我清除了浏览器缓存。如果我删除 50% 50% 不重复它工作正常。添加这两个属性中的任何一个都会使其再次无效（使用开发人员工具进行测试）。
I ran it through ProCSSor as well to clean it up, so I'm not sure where I'm screwing it up...
我也通过 ProCSSor 运行它来清理它，所以我不确定我在哪里搞砸了......
回答by Tom Walters
Yep because the background-imageproperty is for the image part only, not the position or repeat properties of the background, use background:
background-image是的，因为该属性仅用于图像部分，而不是背景的位置或重复属性，请使用background：
.up {
background: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat;
}
回答by Michael
Chrome* will also throw this warning (and doesn't display the bg image), if you have a blank space between urland (like:
Chrome* 也会抛出此警告（并且不显示 bg 图像），如果您在url和之间有空格，(例如：
background-image: url ('img/web-bg.png');
^
(Which was the reason for me to search and find this question but no answer and then doing trial and error.)
（这就是我搜索并找到这个问题但没有答案然后反复试验的原因。）
- ... maybe depending on the Chrome version, I assume.
- ...也许取决于 Chrome 版本，我想。
回答by porcupine
Even if you do everything described above, you may get an "invalid property value" in Firefox. The workaround is to convert:
即使您执行了上述所有操作，您也可能会在 Firefox 中得到“无效的属性值”。解决方法是转换：
background: url(../img/showcase.jpg) no-repeat top center fixed/cover;
into:
进入：
background: url(../img/showcase.jpg) no-repeat top center;
background-attachment: fixed;
background-size: cover cover;
