在旧版浏览器上支持“background-size”属性？ [英] Support 'background-size' property on older browsers?

问题描述

有没有办法，我可以使用CSS3的背景大小属性，然后使用像Modernizr，以确保它在旧的浏览器（特别是我想使用background-size：cover选项）支持？

Is there a way that I can use the CSS3 'Background-Size' property and then use something like Modernizr to ensure that it's supported in older browsers (in particular I want to use 'background-size: cover' option)?

我看了一下cssFx，这是从Modernizr网站提到的，但这只是似乎添加了供应商前缀的浏览器，需要他们使用一个属性，而不是允许浏览器如IE8支持背景大小属性。

I took a look at cssFx, which is mentioned from the Modernizr website, but this only seems to add vendor prefixes for browsers which need them to use a property, rather than allowing browsers such as IE8 to support the background size property.

同样看看CSS3Pie，但是似乎目前不支持background-size属性。

Also looked at CSS3Pie, but that doesn't seem to currently support the background-size property.

[11/10/2011 - 由老版本的浏览器我主要想到IE7 / 8，但理想情况下我想覆盖FF3.6等。]

[11/10/2011 - By older browsers I'm thinking mainly of IE7/8, but ideally I would like to cover FF3.6, etc.]

推荐答案

你是对的， background-size

典型的解决方案是使用额外的< div> code>< img> 元素位于您想要拥有背景的元素之后。

The typical solution to this is to simulate it using an additional <div> or even an <img> element positioned behind the element you want to have the background.

额外的标记，但这个解决方案的缺点是，你将使用它为所有浏览器，而不是 background-size 属性。换句话说，它意味着为旧浏览器故意降级您的代码，这是不理想的。

This can be achieved simply by using additional markup, but this solution has the disadvantage of meaning that you'll be using it for all browsers, instead of the background-size property. In other words, it means deliberately degrading your code for the sake of old browsers, which is not ideal.

如果你想使用CSS属性支持它的浏览器，你可以使用一些Javascript生成上面的标记，但只有在需要的时候。这意味着现代浏览器可以高兴地使用 background-size ，只有旧版的浏览器才会使用后备。

If you want to use the CSS property for browsers that support it, you could use a bit of Javascript to generate the above markup, but only if required. This means that modern browsers can happily use background-size, and only older browsers will use the fallback.

是一些Javascript解决方案，可以在网上（一个快速的谷歌翻出了以下： http://css-tricks.com/766-how-to-resizeable-background-image/ 等），但更重要的是，你需要知道如何触发它基于浏览器。

There are a number of Javascript solutions to this available on the web (a quick google turned up the following: http://css-tricks.com/766-how-to-resizeable-background-image/ among others), but more importantly you need to know how to trigger it based on the browser.

这是Modernizr的用途。在问题中给出的Modernizr的描述不完全准确。它所做的是在HTML标记中产生一组CSS类，并在Javascript中匹配的变量表示所有的浏览器功能。这些是表示当前浏览器是否支持的布尔标志。

This is where Modernizr comes in. The description you've given of Modernizr in the question is not entirely accurate. What it does is produce a set of CSS classes in your HTML markup and matching variables in your Javascript that represent all the browser features. These are boolean flags indicating whether the current browser supports.

因此，使用Modernizr，您可以检查Javascript是否支持 background-size ，否则，如果不支持，只运行替代的javascript函数。

So with Modernizr you can then check in Javascript whether the browser supports background-size or not, and only run the alternative javascript function if it doesn't support it.

if(!Modernizr.backgroundsize) {
    //do stuff here to simulate the background-size property for older browsers.
}

希望有帮助。

这篇关于在旧版浏览器上支持“background-size”属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！