.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 */
}
这显然不起作用,但是有一个技巧可以使它工作吗？谢谢.
解决方法
诀窍是使用短格式背景样式来设置各种背景属性,而不是使用背景大小,背景图像等各个样式.
所以在你的情况下,你会有这样的事情：
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后备解决方案还不够,还可以提供其他选项.
