网页制作 
首页 > 网页制作 > 浏览文章

css 图片变黑白效果 使用CSS将图片转换成黑白的

(编辑:jimmy 日期: 2024/11/17 浏览:3 次 )
可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。
css 图片变黑白效果 使用CSS将图片转换成黑白的grayscale(document.getElementById("thisImage"));或DOM元素集:
grayscale(document.getElementsByTagName("img"));如果你喜欢使用jQuery,还可以使用:
grayscale($("#thisImage"));很简单吧。
实现原理:IE浏览器下是添加灰度滤镜,这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法,然后对每个像素点进行灰度转换~~
因此,在现代浏览器下,对于该方法,图片的灰度处理有两个局限性:
1. 速度。300*300这张一般般大小的图片变灰就要数秒之久;
2. 跨域。安全性机制,无法转换跨域的图片为黑白色。
上一篇:css实现跨浏览器的盒阴影效果告别图片实现类似效果
下一篇:浏览器对于含小数值px(像素)解析的差异及小数值如何解决兼容性问题
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。