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%);时图片变暗了，说明百分百比越大越亮，越小越暗。

扫描二维码关注公众号，回复： 3740600 查看本文章

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();  （还不会） 。

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