css filter 属性值及作用

blur(px)

给图像设置高斯模糊，不接受百分比设置

 /* blur 给图像设置高斯模糊 ，不能用百分比值进行设置*/
             filter: blur(1px); 

brightness(%)

给图片应用一种线性乘法，是图片看起来更暗或更亮，超过100%比原来更亮

/* 给图片应用一种线性乘法，使图片看起来更亮或更暗 超过100%比原来更亮 */
             filter: brightness(50%);

drop-shadow(px)

给图片设置阴影效果，

/* drop-shadow 给图像设置阴影效果 */
             -webkit-filter:drop-shadow(-5px 20px 10px  red); 

第一个值x轴偏移量，第二个值y轴偏移量， 第三个值模糊程度

contrast(%)

调整图像对比度   0% 全黑     100%不变   >100%意味着运用更低的对比

/* contrast 调整图像对比度  0%图像全黑，100%图像不变，超过100%意味着运用更低的对比*/
             filter: contrast(10%); 

grayscale(%)

将图像转为灰度图像，100%完全转为灰度图像

 /*grayscale 将图像转换为灰度图像  100%完全转为灰度图像，值为0%图像无变化 值在0%到100%之间，则是效果的线性乘子 */
             filter: grayscale(20%);

hue-rotate(deg)

给图像应用色相旋转 0deg和360deg无变化   ， 无最大值

 /*  hue-rotate给图像应用色相旋转  0deg和360deg 图像色相无变化 无最大值  默认0 */
             filter:hue-rotate(20deg) ; 

invert(%)

反转输入图像，值定义比例转换  100%完全反转  0%无变化

 /*  invert 反转输入图像，值定义转换的比例 100%是完全反转 0%图像无变化 */
             filter: invert(30%); 

opacity(0%)

转化图像的透明度

/*  opacity转化图像的透明度  0%完全透明 100%图像无变化 */
             filter: opacity(30%); 

saturate(%)

转化图像的饱和度  0%完全不饱和  100%完全饱和 超过100%有更高的饱和度

  saturate 转换图像的饱和度   0%完全不饱和  100%图像无变化 超过100%有更高的饱和度
             filter: saturate(80%); 

sepia

将图像转为深褐色，，100%为完全深褐色，0%无变化

/*  sepia 将图像转为深褐色，100%则是完全深褐色，0%无变化 */
            filter: sepia(50%);