详细内容请点击

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。

不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。

CSS3 greyscale 滤镜实现

如下测试代码:

.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;
}

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懒得去测,支持与否不知。经验来看,应该是支持的。

我需要一个一统江山的方法
一统江山(完全兼容),如果单纯想通过CS

S,也是可以的,你所要做的就是:天天拿个鱼竿去黄浦江钓鱼,年复一年,日复一日……然后,两年后,

只要两年,把上面两个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. 跨域。安全性机制,无法转换跨域的图片为黑白色。

转载来自http://www.zhangxinxu.com/wordpress/?p=2547

更多js内容请点击

js使用CSS将图片转换成黑白(灰色、置灰)的更多相关文章

  1. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  2. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  3. [转] 小tip: 使用CSS将图片转换成黑白(灰色、置灰) ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: ...

  4. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)

    可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大 ...

  5. 使用CSS将图片转换成黑白(灰色、置灰) & 毛玻璃效果

    法1⃣️: IE浏览器: filter: gray; 其他浏览器: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(10 ...

  6. 【转载】使用CSS将图片转换成黑白(灰色、置灰)

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=2547原文摘要: . ...

  7. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  8. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  9. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

随机推荐

  1. Python常用网页字符串处理技巧

    首先一些Python字符串处理的简易常用的用法.其他的以后用到再补充. 1.去掉重复空格 s = "hello hello hello" s = ' '.join(s.split( ...

  2. 关于新建JSP文件后,文件开头报错的处理

    新建了一个web工程,之后建立了jsp页面,刚建立完成,文件开头就报错:The superclass "javax.servlet.http.HttpServlet" was no ...

  3. Introduction into ISO 27145 WWH-OBD

    全球统一的重型发动机的车载诊断系统(WWH-OBD) ISO/PAS 27145 is intended to become the single communication standard for ...

  4. 资源下载南方cass视频教程,包括文档,数据,很全的

    废话就不多说了,开始... 北方cass视频教程,包括文档,数据,很全的 视频下载地址:http://www.400gb.com/file/23459263 GIS网盘进入下载:http://laoh ...

  5. 编写你自己的单点登录(SSO)服务

    王昱 yuwang881@gmail.com   博客地址http://yuwang881.blog.sohu.com 摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统其中.本文从 ...

  6. c# asp.net 鼠标改变控件坐标位置,更改控件坐标,注册表保存读取,打印,查找局域网内打印机等等收集

    界面虽然被我弄的很难看,但功能还可以 里边注册表的路径自己设置一下,或者加一个创建注册表的语句,不然会报错 前台: <%@ Page Language="C#" AutoEv ...

  7. SQL Server 2008数据库重命名方法

    假设SQL Server 2008中有个数据库test,现在要将其改名为zhy步骤:(1) 分离数据库:打开management studio,找到test数据库-->右键-->任务--& ...

  8. TLS握手优化详解

      随着 HTTP/2 的逐渐普及,以及国内网络环境越来越糟糕(运营商劫持和篡改),HTTPS 已经开始成为主流.HTTPS 在 TCP 和 HTTP 之间增加了 TLS(Transport Laye ...

  9. QtInternal 之 高效使用QString

    注意:本文翻译自  http://developer.qt.nokia.com   中的  UsingQStringEffectively   ,中文译文见  简体中文版 ,如果你对翻译wiki感兴趣 ...

  10. eclipse中的tomcat debug模式启动报超时45s

    在eclipse中加入tomcat,开debug模式非常好用,这里就不介绍了 最近eclipse的tomcat开debug模式就是启动不了,增加时间也不能解决,但是非debug模式就可以打开,我觉得是 ...