前端一般都是处理图片的，第一个想到的就是ps。但是前端css的filter属性也可以获得一些意想不到的效果（例如：图片模糊、图片饱和度）。今天我们就来一一介绍这些值的作用。也可以参考runoobfilter(filter)过滤器的值有：none|模糊（）|亮度（）|对比（）|阴影（）|灰度（）|色调旋转（）|反转（）|不透明度（）|饱和（）|棕褐色（）|url();none(默认值，无效果)img{filter:none;}none的渲染:blur()(给图像设置高斯模糊)img{filter:blur(2px);}blur(0px-20px)与原图对比效果：brightness()（对图片进行线性乘法，使其看起来更亮或更暗）brightness(0%)：全黑brightness(100%)：无变化brightness(>100)%):图片变亮img{filter:brightness(50%);}brightness(100%~0%)与原图对比效果：contrast()(调整图片的对比度)contrast(0%):fullgraycontrast(100%):nochangecontrast(>100%):img{filter:contrast(50%);}contrast(100%~0%)对比原图对比更明显：drop-shadow()（为图像设置阴影效果）这个值类似于box-shadowdrop-shadow(h-shadowv-shadowblurspreadcolor)1、（必须）这是设置阴影偏移量的两个值。设置水平距离。负值使阴影出现在元素的左边。设置垂直距离。负值使阴影出现在元素上方。检查的可能单位。如果两个值都是0，阴影直接出现在元素后面（如果设置了和/或，会有模糊效果）。2、（可选）。值越大越模糊，阴影会变大变淡。不允许负值。如果不设置，默认为0（阴影的边界很锐利）。3、（可选）正值会使阴影扩大和增长，负值会使阴影缩小。如果未设置，则默认为0（阴影将与元素大小相同）。注意：webkit，以及其他一些浏览器不支持第四种长度，如果加上了，将不会被渲染。4.（可选）检查值的可能关键字和标签。如果未设置，则颜色值基于浏览器。在Gecko(Firefox)、Presto(Opera)和Trident(InternetExplorer)中，应用了colorcolor属性的值。此外，如果省略颜色值，则阴影在WebKit中是透明的。img{filter:drop-shadow(2px4px6px#000);}drop-shadow(2px4px6px#000)rendering:grayscale()(将图像转换为灰度图像)grayscale(0%):nochangegrayscale(100%)):灰度图grayscale(>100%):与100%效果一致img{filter:grayscale(50%);}grayscale(0%~100%)与原图对比：hue-rotate()（应用色调旋转totheimage)hue-rotate(0deg):Nochangehue-rotate(180deg):Changehue-rotate(360deg):Nochangehue-rotate(361deg)效果等同于hue-rotate(1deg))effect0~360deg是一个循环img{filter:hue-rotate(50deg);}Hue-rotate(0deg~360deg)与原图比较：invert()(Inverttheinputimage)invert(0%):无变化invert(100%):完全反转invert(>100%):与100%效果一致image:opacity()(转换后图片的透明度)opacity(0%):完全透明opacity(100%):无变化opacity(>100%):与100%效果一致s值类似于opacity属性img{filter:opacity(50%);}opacity(100%~0%)对比原图：saturate()（转换图像饱和度）saturate(0%)：完全不饱和saturate(100%):没有变化saturate(>100%):饱和度更高img{filter:saturate(50%);}saturate(0%~200%)与原图相比：sepia()(将图像转暗brown)img{filter:sepia(0%);}sepia(0%~100%)与原图对比：url()（URL函数接受一个XML文件，设置一个SVG滤镜，可以包含一个锚点来指定具体的滤镜元素）SVG滤镜资源是指以xml文件格式定义的svg滤镜效果集，可以通过URL导入，通过锚点（#element-id)指定具体的过滤元素用法：filter:url(svg-url#element-id)svg-xmlfileimg{filter:url("./svg.xml#blur");}效果图进入如下：
