html点击图片改变filter,CSS改变图片颜色之filter属性

一般提到对对图片的处理，都会想到PS。但，其实在前端，CSS也有一些属性起到相同的效果。在CSS中有着CSS滤镜之称的filter属性，他可以让图片模糊，锐化等。

filter属性支持一下关键字：

none()：没有任何效果，默认为none；

img{

width: 300px;

filter: none;

}

效果图：

blur()：高斯模糊，length值越大越模糊；

img{

width: 300px;

filter: blur(4px);

}

brightness()：线性乘法，可以让图片看起来更亮或者更暗；

img{

width: 300px;

filter: brightness(80%);

}

将filter: brightness(80%);改为filter: brightness(20%);时图片变暗了，说明百分百比越大越亮，越小越暗。

contrast()：对比度；

img{

width: 300px;

filter: contrast(50%);

}

drop-shadow()：给图像设置一个阴影效果；

img{

width: 300px;

filter: drop-shadow(300px 0 0 #0B85CC);

}

drop-shadow(h-shadow v-shadow blur spread color);

grayscale()：将图像转换为灰度图像；

img{

width: 300px;

filter: grayscale(80%);

}

hue-rotate()：色相旋转；

img{

width: 300px;

filter: hue-rotate(70deg);

}

invert()：反转；

img{

width: 300px;

filter: invert(100%);

}

有点曝光的感觉。

opacity()：透明化：

img{

width: 300px;

filter: opacity(10%);

}

saturate();

sepia()：将图像转换为深褐色；

url();  (还不会) 。

以上右边图片除了阴影属性其它都为原图来对比。