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

来源：互联网发布：螺旋管换热器计算软件编辑：程序博客网时间：2024/05/01 07:11

1、CSS3 greyscale 滤镜

<img src="mm1.jpg" /><img src="mm1.jpg" class="gray" />.gray {     -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);    filter: gray;}

2、SVG滤镜

新建一个gray.svg文件,拷贝进去如下的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>

CSS调用代码：

filter: url(gray.svg#grayscale);

3、IE浏览器(IE7~9都是支持的)

css   filter: gray;

4、一统江山（完全兼容）

引用<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>HTML代码：<img src="/image/study/s/s256/mm1.jpg" /><img src="/image/study/s/s256/mm1.jpg" id="gray" />JS代码：grayscale(document.getElementById("gray"));jq代码：grayscale($("#thisImage"));

本文转载地址：http://www.zhangxinxu.com/wordpress/?p=2547

阅读全文

0 0