css改变图片颜色的api记录

css滤镜filter的使用,主要是让图片进行一定的模糊,锐化等.mdn可以查到具体的函数方法

filter: none        
    | blur() 
    | brightness() 
    | contrast() 
    | drop-shadow() 
    | grayscale() 
    | hue-rotate() 
    | invert() 
    | opacity() 
    | saturate() 
    | sepia() 
    | url();

先看下none的原图

test.jpg

blur的高斯模糊

img {
    filter:blur(10px);;
}

微信图片_20181112141205.png

brightness(%)线性乘法,让图片变亮或变暗

img {
    filter:brightness(60%);
}

微信图片_20181112141346.png

contrast(%)对比度

img {
    filter:contrast(50%);
}

微信图片_20181112141446.png

drop-shadow(x y spread color)
给图片设置一个阴影效果,阴影合成在图像下面,有4个参数,可以设定阴影模糊度 颜色等

img {
    filter: drop-shadow(59px 9px 7px #ccc);
}

微信图片_20181112142119.png

hue-rotate(deg) 色相旋转

img {
    filter:hue-rotate(70deg);
}

微信图片_20181112142216.png

invert(%) 反转:100%有点像曝光底片的感觉

img {
    filter:invert(100%)
}

微信图片_20181112142342.png

grayscale(%) 将图像转换为灰度图像:%越高,图片的整体灰色度越高

img {
    filter:grayscale(80%);
}

微信图片_20181112142600.png

在一切纪念日网站想变灰就可以采用这种方式

*{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

微信图片_20181112142819.png

sepia(%) 将图像转换为深褐色:有点暖色的感觉

img {
    filter:sepia(80%)
}

微信图片_20181112143131.png

最后就是filter:url()

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="change">
           <feColorMatrix values="5 -1 -1 0 0
          -1 5 -1 0 0
          -1 -5 15 0 0
          0 10 7 1 0" />
        </filter>
    </defs>
</svg>
img {
    filter:url(#change);
}

这块牵扯到svg的feColorMatrix...矩阵的东西比较复杂= =可以自行研究哈...
随便调了个效果..

微信图片_20181112144100.png