有没有一种方法可以让我使用 CSS3 的“Background-Size”属性，然后使用 Modernizr 之类的东西来确保旧浏览器支持它（特别是我想使用“background-size:cover”选项）？
我查看了 Modernizr 网站上提到的 cssFx，但这似乎只是为需要它们使用属性的浏览器添加供应商前缀，而不是允许 IE8 等浏览器支持背景大小属性。
还查看了 CSS3Pie，但目前似乎不支持 background-size 属性。
[2011 年 11 月 10 日 - 对于较旧的浏览器，我主要考虑 IE7/8，但理想情况下我想涵盖 FF3.6 等]
【问题讨论】：
您说得对，许多旧版浏览器不支持background-size。
对此的典型解决方案是使用附加的<div> 或什至位于您想要作为背景的元素后面的<img> 元素来模拟它。
这可以通过使用额外的标记简单地实现，但这种解决方案的缺点是您将在所有浏览器中使用它，而不是 background-size 属性。换句话说，就是为了老的浏览器而故意降级你的代码，这并不理想。
如果您想为支持它的浏览器使用 CSS 属性，您可以使用一些 Javascript 来生成上述标记，但前提是需要。这意味着现代浏览器可以愉快地使用background-size，而只有旧浏览器才会使用回退。
网络上有许多可用的 Javascript 解决方案（快速 google 发现以下内容：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.
}
希望对您有所帮助。
【讨论】：
您可以在以下位置查看对背景大小及其属性的支持：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
【讨论】：
首先，Firefox 3.6 有一个简单的修复方法。有一个供应商前缀：
-moz-background-size
关于使用媒体查询时的解决方案：当用户查看旧浏览器时，您可以使用 Modernizr 来定位另一个图像，这意味着另一个浏览器请求。但是，大概您将为屏幕尺寸变小的每个查询加载较小的图像。因为 Modernizr 会造成这些请求在较新的浏览器中被忽略的情况，所以您将减少大多数使用较新浏览器的人的服务器请求。
出于好奇，我尝试了上述解决方案，并且成功了。我将以下modernizr 类应用为：.no-backgroundsize 用于非背景尺寸支持，即并加载到新图像中。
对于所有其他浏览器，我添加了 .backgroundsize 类，并在 FF 的顶部添加了前缀提及。可以为每个媒体查询重复此操作，并使用 .no-background 的新图像。这是解决问题的一种方法。
-我在 2012 年 12 月 15 日尝试后编辑了这篇文章。
【讨论】：
我认为您可能想使用modernizr 来检查当前浏览器是否支持该属性。如果没有，请尝试找出您的站点/应用程序的替代显示方式，该显示方式在不需要 background-size 属性的情况下仍然看起来不错。
当然，您也可以尝试另一种完全不涉及此属性的方法，例如其中包含图片（您可以调整大小）的底层 div 以及与此 div 重叠的内容。祝你好运。
【讨论】：
另一个选项是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);
}
【讨论】：
更好地支持的最佳样本：
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
【讨论】：