css3的过滤效果的简单示例

灰色滤镜

#p1 img{   

/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/   
width: 100%;　　　　　　　   
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/　   
-webkit-filter: grayscale(1); 　　}

#p1 img{   
            width: 100%;   
            -webkit-filter: sepia(1);   
        }

#p1 img{   
            width: 100%;   
            -webkit-filter: hue-rotate(200deg);   
        }

#p1 img{   
            width: 100%;   
            -webkit-filter: opacity(0.5);   
        }

#p4 img{   
            width: 100%;   
            -webkit-filter: opacity(0.5);   
        }