可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是能够轻松实现的(filter: gray;),不过,当时,其余浏览器是无解的。不过,时代发展,现在,CSS3的逐步推动,咱们也开始看到“黑白效果”大规模应用于实际的可能。css
CSS3 greyscale 滤镜实现html
以下测试代码:css3
.gray {web
-webkit-filter: grayscale(100%);跨域
-moz-filter: grayscale(100%);浏览器
-ms-filter: grayscale(100%);安全
-o-filter: grayscale(100%);svg
filter: grayscale(100%);wordpress
filter: gray;post
}
HTML代码:
<img src="mm1.jpg" />
<img src="mm1.jpg" class="gray" />
若是你手上的浏览器是Chrome18+, 您能够狠狠地点击这里:CSS3 greyscale 滤镜与照片黑白
能够看到相似文章一开始展现的黑白对比效果图。
其余些浏览器,如FireFox很快就会跟上实现。固然,要实现(比方说)FireFox 4浏览器上照片变黑白的效果,也是能够的。可使用SVG的灰度滤镜效果。
SVG滤镜实现
咱们新建一个空白文本文件,好比说:gray.txt. 拷贝进去以下的XML代码:
<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>
而后,修改后缀.txt → .svg. 而后就能够调用了~~
以下CSS调用代码:
filter: url(gray.svg#grayscale);
而后,效果就出来了。若是你手上的浏览器是FireFox4+,您能够狠狠地点击这里:SVG滤镜实现照片黑白demo
别忘了IE浏览器
IE下实现上面已经提过,就是:
filter: gray;
至少IE7~9都是支持的。最近较懒,IE6懒得去测,支持与否不知。经验来看,应该是支持的。
我须要一个一统江山的方法
一统江山(彻底兼容),若是单纯想经过CSS,也是能够的,你所要作的就是:每天拿个鱼竿去黄浦江钓鱼,年复一年,日复一日……而后,两年后,只要两年,把上面两个demo页面F5一下,就能够了!很简单吧!
若是嫌上面的作法过于伦敦,且你也不是一根筋,到是有个一统江山的方法,不过不是CSS的干货,一个貌似有点名气的Greyscale.js。
用法很简单,引用JavaScript文件,以下:
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
而后,一句话:
grayscale(document.getElementById("thisImage"));
或DOM元素集:
grayscale(document.getElementsByTagName("img"));
若是你喜欢使用jQuery,还可使用:
grayscale($("#thisImage"));
很简单吧。
实现原理:IE浏览器下是添加灰度滤镜,这个你们都懂的。其余浏览器貌似使用Canvas中的getImageData方法,而后对每一个像素点进行灰度转换~~
所以,在现代浏览器下,对于该方法,图片的灰度处理有两个局限性:
1. 速度。300*300这张通常般大小的图片变灰就要数秒之久;
2. 跨域。安全性机制,没法转换跨域的图片为黑白色。
您能够狠狠地点击这里:Greyscale.js照片变灰兼容性实现demo
截图跟上面的一致,略。
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
http://www.zhangxinxu.com/wordpress/?p=2547