Question

问题是如何使用Modernizr来检测是否支持SVG CSS背景？

.svg #example{}不是正确的方法，因为不同的浏览器对svg文件有不同的支持。

例如，Modernizr报告在firefox 3.5中支持SVG，但不支持SVG文件和CSS作为背景图像。

Answer 1

纯CSS解决方案怎么样？我可以确认这适用于IE8。

E {
background-image:  url('image.png');
background-image:  none, url('image.svg'), url('image.png');
background-size: 100% 100%;
}

http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/

或尝试其他方法：

E {
background: transparent url(fallback-image.png) center center no-repeat;
background-image: linear-gradient(transparent, transparent), url(vector-image.svg);
}

http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

Answer 2

一种选择是在modernizer中使用内联SVG 选项。我可以确认这在FF 3.6.14中有效。您可以选择“内联SVG”作为现代化构建的一部分，并可以在CSS中进行管理，如：

.logo {
    background: url(mahimage.svg);
    ...
}

.no-inlinesvg .logo {
    background: url(mahimage.png);
    ...
}

或在javascript中：

if (Modernizr.inlinesvg) {
    ...
}
else {
    ....
}

如何使用Modernizr检测是否支持SVG CSS背景？

2 个答案: