css3 滤镜

1.图像转换为灰度图像

<img src='../../images/a.png' class='pic'>

.pic{

filter: grayscale(100%);  //数值越大  灰度效果越明显 100%则完全转为灰度图像 0%图像无变化

}

 

2.高斯模糊

<img src='../../images/a.png' class='pic'>

.pic{

   filter: blur(2px)    ;  //值越大越模糊

}

 

3.给图片应用一种线性乘法，使其看起来更亮或更暗

.pic{

   filter: brightness(100%)    ;  //0%，图像会全黑  ；值是100%，则图像无变化；超过100%也，图像会比原来更亮

}

 

4.调整图像的对比度

.pic{

filter: contrast( 100% );//值是0%的话，图像会全黑;  值是100%，图像不变 ;   超过100%，意味着会运用更低的对比

}

 

5.阴影效果

filter: drop-shadow(x,y,blur,spread,color); // filter:drop-shadow(0px 0px 2px #000)

x : 水平偏移量

y : 垂直偏移量

blur : （可选）默认是0  值越大越模糊  不能使用负值

spread :（可选） 正值 是阴影扩张   负值缩小  Webkit, 以及一些其他浏览器 不支持，加了不会渲染

color： （可选）颜色值    未设定 为黑色（chrome）

 

6.给图像应用色相旋转  (图像位置不变 但是图片上面的色相旋转)

filter : hue-rotate(44deg) ; 

 

7.反转输入图像  (图像位置不变 但是图片上面的颜色反转)

filter ：invert(100%);   //100%值是完全反转  ;0%则图像无变化; 值在0%和100%之间

 

8.透明程度

filter : opacity(%); // 和opacity 相似   0% 完全透明   100%无变化

 

9.饱和度

filter ：saturate(50%)  // 0% 完全不饱和  100% 无变化   超过100%更高的饱和度

 

10.将图像转换为深褐色

filter : sepia(100%); // 0% -- 100%    100%则完全是深褐色的，0%图像无变化

 

11.使用多个滤镜

 filter: contrast(200%) brightness(150%);   //每个滤镜使用空格分隔