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

这适用于支持背景大小的浏览器.否则2x图像被缩放.

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

这应该用于没有后台大小支持的浏览器.

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

当不支持后台大小时,是否有可能欺骗浏览器回退？我知道我可以使用@supports,但它比背景大小支持得少得多,所以在这种情况下毫无意义.我也不想使用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: url(img2x.jpg) 0% 0%/100%;

(0％0％用于background-position(0％0％是默认值),在使用短格式样式时,在background-size值之前是必需的).

到目前为止,我所做的只是将现有代码压缩成一个简短的CSS行,但巧妙的是,现在我们已经完成了这个,一个无法识别背景大小的浏览器会丢掉整个线,而不是仅仅丢掉背景大小.

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

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％背景大小设置,旧版浏览器(如IE8)将获得完全不同的图像,没有任何拉伸.

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

所以,是的,一个完全CSS解决方案,为您提供不支持背景大小的浏览器的后备.

希望有所帮助.

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

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

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

鉴于这个问题我是written a blog post on the subject,希望更详细地介绍它,如果这个CSS后备解决方案还不够,还可以提供其他选项.

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

解决方法

相关文章