在某些浏览器中,包括Chrome稳定版,您可以这样做：
h3 {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
你不会知道,h1将完全渲染成灰度. Everything old is new again.
无论如何 – 有谁知道任何方式来检测特征？
我需要能够应用其他样式,如果fil过滤器不起作用.
解决方法
所谓UPDATED答案：
由于OP提到了一个好点,我正在更新答案,但是没有任何相关或与之前的答案相矛盾,这只是浏览器检测.
艾伦H.提到IE在10日之前.版本,支持过滤器css属性,但不是我们都知道的(CSS3过滤器我的意思).
所以如果我们想要检测CSS3过滤器,我们应该继续使用一点浏览器检测.正如我在my comments提到的.
使用documentMode属性,并将其与简单的特征检测结合起来,我们可以在IE中排除所谓的误报.
function css3FilterFeatureDetect(enableWebkit) {
//As I mentioned in my comments,the only render engine which truly supports
//CSS3 filter is webkit. so here we fill webkit detection arg with its default
if(enableWebkit === undefined) {
enableWebkit = false;
}
//creating an element dynamically
el = document.createElement('div');
//adding filter-blur property to it
el.style.cssText = (enableWebkit?'-webkit-':'') + 'filter: blur(2px)';
//checking whether the style is computed or ignored
//And this is not because I don't understand the !! operator
//This is because !! is so obscure for learning purposes! :D
test1 = (el.style.length != 0);
//checking for false positives of IE
//I prefer Modernizr's smart method of browser detection
test2 = (
document.documentMode === undefined //non-IE browsers,including ancient IEs
|| document.documentMode > 9 //IE compatibility moe
);
//combining test results
return test1 && test2;
}
if(document.body.style.webkitFilter !== undefined)
要么
if(document.body.style.filter !== undefined)
额外的信息：
只需简单的功能检测就可以使用我上面的代码.有关支持的功能的列表,请查看：
> Filter Effects 1.0
> Filter Effects 1.0 functions
要在Chrome中现场演示过滤器,请查看：
还有2个资源给你：
> CSS Filter Effects Landing in WebKit
> When can I use CSS Filter Effects?
在我写这个答案的时候,你必须使用webkit供应商的前缀使它工作.
