Question

有没有办法可以使用CSS3'Dackground-Size'属性，然后使用类似Modernizr的东西来确保它在旧浏览器中得到支持（特别是我想使用'background-size：cover'选项）？

我看了一下在Modernizr网站上提到的cssFx，但这似乎只为需要使用属性的浏览器添加了供应商前缀，而不是允许IE8等浏览器支持后台大小属性。

另外看了CSS3Pie，但目前似乎不支持background-size属性。

[11/10/2011 - 旧版浏览器我主要考虑IE7 / 8，但理想情况下我想覆盖FF3.6等。]

Answer 1

您认为许多旧版浏览器不支持background-size。

对此的典型解决方案是使用位于要获得背景的元素后面的其他<div>或甚至<img>元素来模拟它。

这可以通过使用额外的标记来实现，但是这种解决方案的缺点是，您将在所有浏览器中使用它，而不是background-size属性。换句话说，它意味着为了旧浏览器故意降级代码，这是不理想的。

如果要对支持它的浏览器使用CSS属性，可以使用一些Javascript来生成上述标记，但仅在需要时才生成。这意味着现代浏览器可以愉快地使用background-size，只有旧浏览器才能使用后备。

网上有很多Javascript解决方案（快速谷歌提供了以下内容：http://css-tricks.com/766-how-to-resizeable-background-image/等），但更重要的是，你需要知道如何根据浏览器触发它。

这就是Modernizr的用武之地。您在问题中对Modernizr的描述并不完全准确。它的作用是在HTML标记中生成一组CSS类，并在Javascript中匹配代表所有浏览器功能的变量。这些是布尔标志，指示当前浏览器是否支持。

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

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

希望有所帮助。

Answer 2

您可以在http://www.standardista.com/css3/css3-background-properties

看到对背景大小及其属性的支持

此CSS支持IE9 +，FireFox 3.6 +，Safari，Chrome：

background-size: cover;
-moz-background-size: cover;

对于IE7 / 8支持，caniuse.com列出了此polyfill：https://github.com/louisremi/background-size-polyfill

Answer 3

首先，Firefox 3.6有一个简单的解决方法。有供应商前缀：

-moz-background-size

关于使用媒体查询时的解决方案：您可以使用Modernizr定位另一个图像，以便在用户查看旧浏览器时，这将意味着另一个浏览器请求。但是，据推测，您将为屏幕尺寸变小的每个查询加载较小的图像。因为Modernizr会创建一种情况，在较新的浏览器中将忽略这些请求，您将减少使用较新浏览器的大多数人的服务器请求。

出于好奇，我尝试了上述解决方案并且有效。我将以下modernizr类应用为：.no-backgroundsize用于非背景大小支持，即加载到新图像中。对于所有其他浏览器，我添加了类.backgroundsize，并在FF顶部包含了前缀。对于每个媒体查询，可以使用.no-background的新图像重复此操作。这是解决问题的一种方法。

- 我在12/15/12尝试后编辑了这篇文章。

Answer 4

我想您可能想使用modernizr来检查当前浏览器是否支持该属性。如果没有，请尝试找出您的网站/应用程序的替代显示，它仍然看起来不错，而不需要background-size属性。

当然，你也可以尝试另外一种不涉及这个属性的方法，比如一个带有图片的底层div（你可以调整大小）和与这个div重叠的内容。祝你好运。

Answer 5

另一种选择是Background Size Polyfill：

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

Answer 6

支持更好的最佳样本：

  background-image: url(bg-image.png);

      -webkit-background-size: 100% 100%;           /* Safari 3.0 - Old Chrome - Old Android */
         -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
           -o-background-size: 100% 100%;           /* Opera 9.5 */
              background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

不要添加此内容，因为它在新的Firefox版本中出现了问题：

-moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5)

来源：mozilla.org

在旧版浏览器上支持“background-size”属性？

6 个答案: