CSS background简写属性在浏览器中失效问题咨询

嘿，我发现你踩了个很容易犯的小坑！你尝试把多行背景属性简化成简写时，用错了属性——你把no-repeat、center、cover这些值都塞到background-image里了，但background-image这个属性只能用来指定背景图像的URL，根本不支持其他背景相关的属性值，这就是Firefox不识别的核心原因！

正确的写法来了 #

你需要用background这个专门的简写属性来整合所有背景相关设置，正确代码应该是这样：

.lc {
  background: url(../img/header.png) no-repeat center / cover;
}

额外小贴士 #

• 如果需要添加背景颜色，记得把颜色值放在简写的最后，比如：

.lc {
  background: #f5f5f5 url(../img/header.png) no-repeat center / cover;
}

• 注意你修改后的路径/img/backgrounds/header.png，要确保这个相对/绝对路径是正确的，不然图像也会加载失败哦。

这个写法完全符合CSS规范，在Firefox、Chrome、Safari等现代浏览器里都能正常生效~

内容的提问来源于stack exchange，提问作者user3541631