CSS滤镜 之 黑白效果

Note:hover on the picture,you can see the effect.

View Code 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style type="text/css">
 5 img#pic:hover
 6 {
 7     -webkit-filter: grayscale(100%);
 8     -moz-filter: grayscale(100%);
 9     -ms-filter: grayscale(100%);
10     -o-filter: grayscale(100%);
11     
12     filter: grayscale(100%);
13     
14     filter: gray;
15 }
16 </style>
17 </head>
18 <body>
19 
20 <img id="pic" src="klematis.jpg" width="150" height="113" alt="klematis"/>
21 <p><b>Note:</b>hover on the picture,you can see the effect.</p>
22 </body>
23 </html>
posted @ 2012-09-22 11:36  微小  阅读(176)  评论(0)  编辑  收藏  举报