javascript - 检测对背景大小的支持：封面

Question

检测对 CSS3 background-size:cover支持的保存方法是什么，尤其是在 IE < 9 中？

以下测试在 IE < 9 中返回误报，因为它实际上将background-size设置为cover：

div.style.backgroundSize = 'cover';

我在测试时得到的唯一真实结果：

if ('backgroundSize' in div.style)

但根据网站http://www.standardista.com/css3/css3-background-properties/#bg11，IE 6/7/8 应该返回auto ，不支持仅覆盖和包含。

编辑：

我想使用自己的解决方案，但我检查了Modernizr 使用的代码。似乎他们使用了相同的技术，在 IE < 9: Set backgroundSize = 'cover'然后检查style.backgroundSize == 'cover'。

请参阅我的JSFiddle。

Answer 1

如果您使用Modernizr，您只能下载执行此类任务所需的代码

http://modernizr.com/download/#-backgroundsize-testprop-testallprops-domprefixes

然后你可以测试

if (Modernizr.backgroundsize) {
    /* backgroundSize supported */
}

Answer 2

如果您试图检测功能低下的浏览器以避免将邮票图像卡在中间，那么一种快速而肮脏的解决方法是

var rules = document.styleSheets[0].cssRules;

如果它未定义，那么您知道您的浏览器功能低下，可能应该采用您的后备方法。YMMV。

Answer 3

您需要在设置之前检查 BackgroundSize 是否作为样式属性存在。

var supported = ('backgroundSize' in document.documentElement.style);
if(supported){
    var temp = document.createElement('div');
    temp.style.backgroundSize = 'cover';
    supported = temp.style.backgroundSize == 'cover';
};
return supported;

来源：http ://upshots.org/javascript/javascript-detect-support-for-background-size-cover

在此之前，您可能还想尝试使用 CSS.supports() 进行检测。见 MDN：https ://developer.mozilla.org/en-US/docs/Web/API/CSS/supports

Answer 4

这仅使用 javascript，没有 jquery 只需检查您使用的浏览器版本

//check if Is bad IE. 
var noBGSizeSupport = window.attachEvent && !window.addEventListener 

if(noBGSizeSupport){
    //does not support BG size property
} else {
  // supports background size property
}