7

这对于支持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，但在这种情况下，它的支持程度远低于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 */
}

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

4

3 回答 3

15

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

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

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

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

（在使用短格式时需要在值之前使用（默认0% 0%为0% 0%）。）background-positionbackground-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*/

您可以在此处查看此操作的演示。现代浏览器将获得一个背景图像，通过 100%background-size设置拉伸，而较旧的浏览器（如 IE8）将获得完全不同的图像，没有任何拉伸。

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

所以是的，一个完整的 CSS 解决方案，可以为不支持background-size.

希望有帮助。

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

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

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

鉴于这个问题，我写了一篇关于这个主题的博客文章，希望能更详细地介绍它，并在这个 CSS 后备解决方案不够用时提供其他选项。

于 2013-05-30T21:27:21.030 回答
1

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

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

你得到了 PHP 中的用户代理$_SERVER['HTTP_USER_AGENT']

于 2013-05-30T20:53:09.497 回答
0

我可能不完全理解缺乏对“背景大小”属性的支持究竟是什么问题，但这是我的想法：

如果您想使用双倍大小的背景图像，可能是用于高密度（视网膜）显示器。如果是这样，我会尝试使用单个背景图像和“背景大小”来定义我的基本样式，旧版 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/

于 2013-05-30T21:06:04.863 回答