Pete LePage
今年早些时候，WebKit 更新了 CSS background 简写属性的行为。进行此更改后，如果未在简写声明中设置 background-size，background 简写属性会将 background-size 重置为其默认值 auto auto。此更改使 Chrome 和其他 WebKit 浏览器符合此规范，并与 Firefox、Opera 和 Internet Explorer 的行为一致。
随着 Chrome（Android 版）不断纳入 WebKit 的当前版本，这一变化现已逐步在 Android 中推出。由于这是针对 webkit 的修复，因此在多个浏览器中测试的网站可能不受影响。
以往的操作方式
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
background 简写属性不包含任何尺寸属性，因此会将 background-size 重置为默认值 auto auto。
指定图片大小的正确方法
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
在 fooB 中，若要在 background 简写形式中指定 background-size，需要先指定 position (0%)，后跟正斜杠，然后是 background-size（50 像素，40 像素）。
现有代码的修复
有几个选项可轻松解决此问题：
- 使用
background-image而非background简写属性。 - 最后设置
background-size，采用比为该元素设置background的任何其他 CSS 规则更高的特异性，并且别忘了检查和:hover规则。 - 将
!important属性应用于background-size。 - 将大小信息移至
background简写属性。
额外知识点：背景图片偏移
除了此项更改，您现在还可以更灵活地设置图片在背景中的位置。过去，您只能指定图片相对于左上角的位置，而现在，您可以指定相对于容器边缘的偏移量。例如，设置 background-position: right 5px bottom 5px; 后，图片位置距右边缘 5px，距底部 5px。查看 JSBin 上的此示例