背景图像上的属性值无效答案

【问题标题】：Invalid Property Value on background-image背景图像上的属性值无效
【发布时间】：2012-12-31 22:52:25
【问题描述】：

.up { background-image: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat; }

这段代码在 crome（和 safari）中给了我一个“无效的属性值”。我在另一个页面上使用完全相同的代码，工作正常。我清除了浏览器缓存。如果我删除 50% 50% no-repeat 它工作正常。添加这两个属性中的任何一个都会再次使其无效（使用开发人员工具进行测试）。

我也通过 ProCSSor 运行它来清理它，所以我不确定我在哪里搞砸了......

【问题讨论】：

【解决方案1】：

是的，因为background-image 属性仅用于图像部分，而不是背景的位置或重复属性，请使用background：

.up { 
    background: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat; 
}

【讨论】：

我同意 :-) 不过你打败了我！ :-)
不用担心，显然需要一双新鲜的眼睛！
这就是我早起 2 小时的收获。
@TomWalters 仍然不知道我也遇到了与上述问题相同的错误，然后尝试了您的解决方案，但遇到了同样的错误：background: url(../img/showcase.jpg) no-repeat top center fixed/cover;。我正在 Firefox 上进行测试。

【解决方案2】：

如果您在url 和( 之间有空格，Chrome* 也会抛出此警告（并且不显示背景图像），例如：

background-image: url ('img/web-bg.png');
                     ^

（这就是我搜索并找到这个问题但没有答案然后反复试验的原因。）

【讨论】：

【解决方案3】：

即使您执行了上述所有操作，您也可能在 Firefox 中获得“无效的属性值”。解决方法是转换：

background: url(../img/showcase.jpg) no-repeat top center fixed/cover;

进入：

background: url(../img/showcase.jpg) no-repeat top center;
background-attachment: fixed;
background-size: cover cover;

【讨论】：

【解决方案4】：

当您不使用撇号且文件包含空格时，Chrome 也会出现此错误。简单地改变：

background-image: url(../img/file with spaces.png);

到：

background-image: url('../img/file with spaces.png');

【讨论】：

【解决方案5】：

只需删除 ../ 并将其用作

background: url(img/showcase.jpg) no-repeat top center;

【讨论】：