css3的过滤效果简单实例

把白色的背景框写好之后，接下来就该到滤镜了

首先来第一张，艺术的黑白色

1. #div1 img{   
2.   
3.   
4. width: 100%;　　　　　　　   
5. 　   
6. -webkit-filter: grayscale(1); 　　}   
7.   

第二张照片，额...老照片.

1. #div1 img{   
2.             width: 100%;   
3.             -webkit-filter: sepia(1);   
4.         }  

第三张照片，反色？我也不太清楚啥颜色

1. #div1 img{   
2.             width: 100%;   
3.             -webkit-filter: hue-rotate(200deg);   
4.         }  

第四张照片，仿佛罩了一层白雾

1. #div1 img{   
2.             width: 100%;   
3.             -webkit-filter: opacity(0.5);   
4.         }   

还有一张照片的效果图上没有，是模糊效果代码如下

1. #div4 img{   
2.             width: 100%;   
3.             -webkit-filter: opacity(0.5);   
4.         }  

好了，我的滤镜分享完毕，接下来美图去了

以上这篇css3的过滤效果简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。