浏览器变灰---祈福雅安

祈福雅安
雅安发生地震,需要大家热心的无私的帮助。希望大家心连心铸造爱心。为灾区人民献一份力量。谢谢大家。
作为一名打酱油烂的不能再烂的前端攻城师。


关于浏览器变灰的实现方式:
1、最干脆最直接的办法是把图片变灰。(适合少量修改图片,兼容有所的浏览器)
2、用滤镜(IE滤镜和css3滤镜)控制,如(能够修改所有元素(包括图片),兼容IE系列及webkit系列)

-webkit-filter:grayscale(100%);
-o-filter:grayscale(100%);
-ms-filter:grayscale(100%);
filter:grayscale(100%);    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 

3、用grayscale插件(官方网站:http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/),
主要是通过canvas将图片转换成功灰色图片,利用data:image/png;base64,重新将src复制过去。
(兼容绝大部分浏览器,包括firefox。不过,建议只有让firefox调用grayscale插件,修改指定的图片。)
grayscale.js:http://james.padolsey.com/demos/grayscale/grayscale.js

在实际中可以根据需要选择哪种方式实现,变灰是一种爱,虽然不能创造什么,但是牵挂着我们每一个人的心。
祈福雅安

posted @ 2013-04-22 00:02  前端咖  阅读(2541)  评论(10编辑  收藏  举报