IE特有的滤镜常常作为CSS各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS的Filter特性，因此当前仅Webkit内核的浏览器支持CSSFilter，而FF和IE10+则需要使用SVG滤镜(svgeffectsforhtml)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！
先P张原图作参考系：
Speia滤镜(Speia)
Speia滤镜是对图片或元素整体进行棕褐色处理，就是老照片那种效果。下面直接看效果：
看岁月的痕迹啊，是不是有妈妈年代的感觉呢？
CSS滤镜实现
styletype="text/css".sepia{/**格式，filer:sepia(效果范围)*效果范围，取值范围为0-1或0-%；0表示无效果，1或%表示最大效果*/-webkit-filter:sepia(%);-moz-filter:sepia(%);-o-filter:sepia(%);-ms-filter:sepia(%);filter:sepia(%);}/styledivclass="sepia"style="background:url(./mm.jpg)"/div
IE5.5~9特的处理方式（待研究）
尝试过IE滤镜filter:progid:XDImageTransform.Microsoft.MaskFilter(color=颜色)，仅仅能使用gif图片（其他格式的图片将导致整个元素消失不见），而且遮罩层与图片重合的部分将变为空白一片，另外在IE11浏览器文档模式为5.5~9下滤镜均失效（元素按照没有设置滤镜的方式被渲染显示）。
结论：IE滤镜无法处理Sepia效果。
而通过JS填坑方面，想在元素表面附加一层半透明棕褐色的遮罩层，但效果与CSSFilter相距甚远，失败告终。
FF和IE10+的处理方式
可使用Canvas作处理，下面是简单实现的代码，目标元素imgid="sepia"src="./mm.jpg"/
//定义处理方法varsepia=function(el){varcanvas=document.cateElement(canvas);varw=canvas.width=el.offsetWidth,h=canvas.height=el.offsetHeight;varctx=canvas.getContext(d);ctx.drawImage(el,0,0);//对像素作处理varimgData=ctx.getImageData(0,0,w,h),d=imgData.data;for(inti=0,len=d.length;ilen;i+=4){varr=d,g=d[i+1],b=d[i+];d=(r*0.9)+(g*0.)+(b*0.);d[i+1]=(r*0.49)+(g*0.)+(b*0.);d[i+]=(r*0.7)+(g*0.54)+(b*0.11);}ctx.putImageData(imgData,0,0);//导出varimg=newImage();img.src=ctx.toDataURL("image/*");turnimg;};//调用varimg=sepia(document.getElementById(sepia));document.body.appendChild(img);
灰度图滤镜(Grayscale)
灰度图艺术范！
CSS滤镜的实现
styletype="text/css".grayscale{/**格式，filer:grayscale(效果范围)*效果范围，取值范围为0-1或0-%；0表示无效果，1或%表示最大效果*/-webkit-filter:grayscale(%);-o-filter:grayscale(%);-moz-filter:grayscale(%);-ms-filter:grayscale(%);filter:grayscale(%);}/styledivclass="grayscale"style="background:url(./mm.jpg)"/div
IE5.5~9的实现
使用IE滤镜：filter:gray;
FF和IE10+的处理方式
使用SVGeffectforHTML的方式：
grayscale.svg:
svgxmlns="