我可以为背景大小实现纯 CSS 后备吗？

这对于支持的浏览器来说效果很好background-size。否则，图像会缩放 2 倍。

.a {
  background-image: url(img2x.jpg); /* 1000x1000 */
  background-size: 100%;
  height: 500px;
  width: 500px;
}

这应该用于没有background-size支持。

.a {
  background-image: url(img1x.jpg); /* 500x500 */
  height: 500px;
  width: 500px;
}

是否有可能欺骗浏览器在以下情况下回退background-size不支持？我知道我可以使用@supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports但它的支持比background-size在这种情况下毫无意义。我也不想使用 JavaScript。

基本上都是这样，除了工作！

.a {
  background-image: url(img1x.jpg); /* 500x500 */
  height: 500px;
  width: 500px;
  /* stop parsing this rule when background-size is not supported */
  /* otherwise continue parsing and set different background-image */
  background-size: 100%;
  background-image: url(img2x.jpg); /* 1000x1000 */
}

这显然不起作用，但是有什么技巧可以让它起作用吗？谢谢。

仅 CSS 后备background-size这很棘手，但是是可以做到的。

诀窍是使用缩写形式backgroundstyle 来设置各种背景属性，而不是使用单独的样式，例如background-size, background-image, etc.

所以在你的情况下，你会得到这样的东西：

background: url(img2x.jpg) 0% 0%/100%;

(The 0% 0% is for background-position（默认为 0% 0%）background-size使用短格式样式时的值）。

到目前为止，我所做的就是将现有代码压缩成一个简短的 CSS 行，但聪明的一点是，现在我们已经做到了这一点，一个无法识别的浏览器background-size会扔掉整条线，而不是仅仅扔掉background-size在其自己的。

这意味着我们可以为旧版浏览器指定一组完全不同的背景值。

background: url(ie8bg.jpg);   /* Shown by IE8 and other old browsers */
background: url(img2x.jpg) 0% 0%/100%;  /* shown by new browsers with background-size support*/

你可以看一下这个的演示在这里行动 http://jsfiddle.net/DgtxD/embedded/result/。现代浏览器将获得一张背景图像，拉伸 100%background-size设置，旧版浏览器（如 IE8）将获得完全不同的图像，没有任何拉伸。

由于您可以为旧浏览器定义完全独立的背景，因此您甚至可以为 IE8 设置纯色背景而不是图像，同时仍为其他浏览器提供图像。

所以是的，一个完整的 CSS 解决方案可以为不支持的浏览器提供后备方案background-size.

希望有帮助。

[EDIT]
浏览器兼容性在这里可能是一个小问题。部分浏览器可能支持background-size但不支持将其作为background简短的语法。大多数情况下，这仅适用于较旧的浏览器（例如 Firefox 7），但在当前版本的 Safari 中仍然存在问题。这意味着，通过这种技术，Safari 将看到后备背景，即使它实际上支持background-size.

这显然并不理想，但它至少会获得后备图像，这意味着页面至少应该看起来还不错，即使不如其他浏览器那么好。希望 Safari 中的这个问题能够在未来的版本中得到解决。

同时，这一点并没有减损这个答案是问题的有效解决方案的事实 - 它确实在纯 CSS 中提供了后备选项。

鉴于这个问题我已经写了一篇关于该主题的博客文章 http://spudley.com/blog/css-background-size-and-browser-support，希望它能更详细地介绍它，并在这个 CSS 后备解决方案不够时提供其他选项。