Question

适用于支持background-size的浏览器。否则，2x图像将被缩放。

.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，但它比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 */
}

这显然不起作用，但是有没有可以使它工作的技巧？感谢。

Answer 1

background-size仅支持CSS的回退非常棘手，但可以这样做。

诀窍是使用短格式background样式来设置各种背景属性，而不是使用background-size，background-image等单独的样式。

所以在你的情况下，你会有这样的事情：

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

（0% 0%用于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*/

您可以看到此in action here的演示。现代浏览器将获得一个背景图像，延伸100％background-size设置，旧版浏览器（如IE8）将获得完全不同的图像，无需任何拉伸。

由于您要为旧浏览器定义一个完全独立的背景，您甚至可以为IE8而不是图像提供稳固的背景颜色，同时仍为其他浏览器提供图像。

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

希望有所帮助。

<强> [编辑]
浏览器兼容性可能是一个小问题。某些浏览器可能支持background-size但不支持background短语法的一部分。在大多数情况下，这仅适用于较旧的浏览器（例如Firefox 7），但在当前版本的Safari中仍然存在问题。这意味着，使用这种技术，Safari会看到后备背景，即使它确实支持background-size。

这显然不是理想的，但它可以通过至少获得后备图像这一事实得到缓解，这意味着页面应该至少看起来不错，如果没有其他浏览器那么好。希望Safari中的这个问题将在未来版本中修复。

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

根据这个问题，我written a blog post on the subject，希望更详细地介绍它，并提供其他选项，如果这个CSS后备解决方案还不够。

Answer 2

您已经提到了@supports。您可以将imgx1.jpg定义为默认值，如果支持background-size，则将其设置为img2x.jpg

对于像Chrome这样的浏览器，您可以使用PHP解析CSS文件，并根据用户代理决定浏览器是否支持此功能。

您使用$_SERVER['HTTP_USER_AGENT']

在PHP中获得了User-Agent

Answer 3

我可能不完全明白缺乏对'background-size'属性的支持究竟是什么问题，但这是我的想法：

如果您想使用双倍大小的背景图像，可能是高密度（视网膜）显示。如果是这样，我会尝试使用单个背景图像和“背景大小”来定义我的基本样式，旧版IE将忽略它。但是，处理像素密度媒体查询的浏览器将尝试渲染双密度背景图像。

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

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
       .a {
         background-image: url(img2x.jpg); /* 1000x1000 */
       }
}

我希望这是有道理的，这就是你一直在寻找的东西。

以下是关于CSS / JS视网膜背景大小调整的一些更好的想法：http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

我可以为背景大小实现仅CSS回退吗？

3 个答案: