有没有办法可以使用CSS3’Dackground-Size’属性,然后使用像Modernizr这样的东西来确保它在旧版浏览器中得到支持(特别是我想使用’background-size：cover’选项)？
我看了一下在Modernizr网站上提到的cssFx,但这似乎只为需要使用属性的浏览器添加了供应商前缀,而不是允许IE8等浏览器支持后台大小属性.
另外看了CSS3Pie,但目前似乎不支持background-size属性.
[11/10/2011 – 在旧版浏览器中,我主要考虑的是IE7 / 8,但理想情况下我想覆盖FF3.6等等]
解决方法
你是对的,许多旧版浏览器不支持后台大小.
对此的典型解决方案是使用额外的< div>来模拟它.甚至是< img>元素位于要获得背景的元素后面.
这可以通过使用额外的标记来实现,但是这个解决方案的缺点是,您将在所有浏览器中使用它,而不是使用background-size属性.换句话说,它意味着为了旧浏览器故意降级代码,这是不理想的.
如果要对支持它的浏览器使用CSS属性,可以使用一些Javascript来生成上述标记,但仅在需要时才生成.这意味着现代浏览器可以愉快地使用背景大小,只有较旧的浏览器才会使用后备.
网上有很多Javascript解决方案(快速谷歌提供了以下内容：http://css-tricks.com/766-how-to-resizeable-background-image/等),但更重要的是你需要知道如何根据浏览器触发它.
这就是Modernizr的用武之地.您在问题中给出的Modernizr描述并不完全准确.它的作用是在HTML标记中生成一组CSS类,并在Javascript中匹配代表所有浏览器功能的变量.这些是指示当前浏览器是否支持的布尔标志.
因此,使用Modernizr,您可以在Javascript中检查浏览器是否支持后台大小,并且只有在不支持它时才运行备用javascript函数.
if(!Modernizr.backgroundsize) {
//do stuff here to simulate the background-size property for older browsers.
}
希望有所帮助.
