css - 背景图像上的属性值无效

Question

.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 运行它来清理它，所以我不确定我在哪里搞砸了......

score 55 · Accepted Answer

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

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

score 11 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

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

到：

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

score 0 · Accepted Answer

0

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

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

于 2020-10-06T18:20:39.163 回答

5 回答 5