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

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

仅支持CSS的后备background-size是棘手的,但是可以做到.

诀窍是使用短式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*/

你可以在这里看到这个演示.现代浏览器将获得一个背景图像,延伸100%background-size设置,旧版浏览器(如IE8)将获得完全不同的图像,没有任何拉伸.

由于您要为旧浏览器定义完全独立的背景,因此您甚至可以为IE8而不是图像执行固定背景颜色,同时仍为其他浏览器提供图像.

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

希望有所帮助.

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

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

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

根据这个问题,我写了一篇关于这个主题的博客文章,希望能够更详细地介绍它,并提供其他选项,如果这个CSS后备解决方案还不够.