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

来源：互联网发布：java就业培训教程编辑：程序博客网时间：2024/05/01 20:53

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

图片效果如下

代码如下，兼容IE浏览器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图片灰色蒙版</title>    <style>        img {            width:300px;            height:300px;        }        .gray {            -webkit-filter: grayscale(100%);            -moz-filter: grayscale(100%);            -ms-filter: grayscale(100%);            -o-filter: grayscale(100%);            filter: grayscale(100%);            filter: gray;        }    </style></head><body>    <img src="img/timg.jpg">    <img src="img/timg.jpg" class="gray"></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

还有很多方法原内容博主写的很不错，在这里推荐下：http://www.zhangxinxu.com/wordpress/2012/08/css-svg-filter-image-grayscale/

阅读全文

0 0