css - 我可以为背景尺寸实现纯 CSS 回退吗？

Question

这适用于支持 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 */
}

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

Answer 1

background-size 的纯 CSS 回退很棘手，但可以做到。

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

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

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 设置进行拉伸(stretch)，而较旧的浏览器(如 IE8)将获得完全不同的图像，没有任何拉伸(stretch)。

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

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

希望对您有所帮助。

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

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

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

鉴于这个问题，我 written a blog post on the subject ，如果此 CSS 回退解决方案不够充分，希望能更详细地介绍它并提供其他选项。