8

有没有一种方法可以让我使用 CSS3 'Background-Size' 属性，然后使用 Modernizr 之类的东西来确保旧浏览器支持它（特别是我想使用'background-size：cover' 选项）？

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

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

[11/10/2011 - 对于较旧的浏览器，我主要考虑的是 IE7/8，但理想情况下我想涵盖 FF3.6 等]

4

6 回答 6

10

你是对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.
}

希望有帮助。

于 2011-10-11T08:39:36.060 回答
3

您可以在以下位置查看对 background-size 及其属性的支持：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

于 2013-10-18T17:23:54.663 回答
1

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

-moz-background-size

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

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

-我在 2012 年 12 月 15 日尝试后编辑了这篇文章。

于 2012-12-15T03:10:32.267 回答
0

我认为您可能想使用modernizr 来检查当前浏览器是否支持该属性。如果不是，请尝试找出您的站点/应用程序的替代显示方式，该显示方式在不需要 background-size 属性的情况下仍然看起来不错。

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

于 2011-10-10T16:27:00.467 回答
0

另一种选择是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);
}
于 2015-02-05T17:28:38.867 回答
0

更好地支持的最佳样本：

  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

于 2016-12-01T16:46:26.890 回答