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

阅读更多

 CSS3 greyscale 滤镜实现

 

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

 

 

SVG滤镜实现

我们新建一个空白文本文件，比如说：gray.txt. 拷贝进去如下的XML代码：

 然后，修改后缀.txt → .svg. 然后就可以调用了~~

如下CSS调用代码：

filter: url(gray.svg#grayscale);

 然后，效果就出来了。

别忘了IE浏览器

IE下实现上面已经提过，就是：

filter: gray;

 至少IE7~9都是支持的。

 

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

• 
• 大小: 21.3 KB

• 查看图片附件