背景图像上的属性值无效

Question

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

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

我也通过ProCSSor运行它来清理它，所以我不知道我把它搞砸了......

Answer 1

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

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

Answer 2

如果url和(之间有空格，则Chrome *也会抛出此警告（并且不显示bg图片）：

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

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

• ...可能取决于Chrome版本，我认为。

Answer 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;

Answer 4

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

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

Answer 5

当您不使用撇号并且文件中有空格时，Chrome中也会发生此错误。只需更改：

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

收件人：

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