CSS3 黑白图片

浏览数：40 / 时间：2015年06月09日

每当有自然灾害的时候，很多网站都是灰白的，想知道是怎么实现的嘛？

1.IE私有滤镜的方式
自IE4开始，IE引入了私有滤镜，可以实现透明度、模糊、阴影、发光等效果，当然也可以实现灰度图像效果。代码如下

img {    
    filter: gray; /* just for IE6-9 */    
}

IE10开始抛弃了这种私有滤镜，但是还没有提供对标准CSSfilter的支持，所以说IE10以上版本的灰度图像，仍然是一个问题。
2.W3c CSS filter方式
CSS3中借鉴IE私有滤镜的方式提供了标准的CSS Filter方案，里面可以支持grayscale灰度、sepia褐色、saturate饱和度、hue-rotate色相旋转、invert反色、 opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影等十种效果。关于CSS3 Filter大家可以参照以下教程：大漠的《CSS3 Filter的十种特效》和Adobe的《CSS Filter Lab》。
实现grayscale灰度图像的代码是这样的

img{  
 -webkit-filter: grayscale(100%);    /* webkit内核支持程度较好 */  
    -moz-filter: grayscale(100%);    /* 其他内核现在并不支持，为了将来兼容性书写 */  
     -ms-filter: grayscale(100%);  
      -o-filter: grayscale(100%);  
         filter: grayscale(100%);    /* 标准写法 */  
}

其中grayscale（）的取值为0%-100%，也可以用0-1取代，0%代表彩色图像，100%代表完全的灰度。
css filter的浏览器兼容情况如下，Chrome31+，Safari7+，Opera20+，ios Safari6+,Android Browser4.4+,Blackberry 10+均支持了-webkit-filter的方式，IE不支持，firefox不支持。

3.SVG方式实现

新建一个txt文件，把代码粘贴进去更改后缀为svg，通过filter: url(gray.svg#grayscale);调用

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

4.JS实现方式

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
<script>
//grayscale(document.getElementById("thisImage"));
//grayscale(document.getElementsByTagName("img"));
//grayscale($("#thisImage"));
</script>

调用方式三选一

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS3 黑白图片