使用background简写属性时background-position继承失效问题咨询

这个问题的核心在于CSS background简写属性的解析规则，以及inherit关键字的特殊性，咱们一步步说清楚：

1. background简写的解析优先级 #

background简写的语法比较灵活，大部分子属性没有严格的顺序（除了background-position和background-size必须用/分隔，且position在前）。但浏览器会优先把前面的合法值解析为background-image，而不是background-position。

2. inherit在这里被误解析了 #

你写的inherit / contain no-repeat #FF7000中，inherit是一个合法的background-image值（表示继承父元素的背景图），所以浏览器会直接把它解析为background-image: inherit，而不是你期望的background-position: inherit。

这会导致两个问题：

• 虽然你用id选择器指定了background-image，会覆盖这个inherit，但background-position因为没有被显式指定，会被设为默认值0% 0%（哪怕父元素的position也是0% 0%，这也不是你想要的继承逻辑）。
• 如果你的父元素background-position不是默认值，这种写法根本不会继承它，因为浏览器从一开始就没把inherit当作position的值。

3. 为什么center / ...能生效？ #

center不是合法的background-image值（它既不是图片路径，也不是none这类关键字），所以浏览器只能把它解析为background-position的值，/后面的contain自然就被识别为background-size，整个简写声明被正确解析，所以效果符合预期。

正确的写法 #

如果你确实想让background-position继承父元素的值，同时用简写指定其他属性，可以明确指定background-image的值（比如none，因为id选择器会覆盖它），再写position的inherit：

.side_img {
  width: 150px;
  height: 300px;
  background: none inherit / contain no-repeat #FF7000;
}

不过更稳妥的方式是分开写各个背景属性，彻底避免简写的解析歧义：

.side_img {
  width: 150px;
  height: 300px;
  background-color: #FF7000;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: inherit;
}

这样每个属性的作用都清晰明了，不会有浏览器解析的问题。

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