背景图像上的属性值无效

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和(这样的:

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

(这是我搜索并找到这个问题但没有答案,然后进行反复试验的原因.)

Answer 3

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

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

到：

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

Answer 4

即使您执行了上述所有操作，您也可能会在 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;