前言》说到图片处理，我们往往会想到PhotoShop等图片处理工具。作为前端开发者，我们经常需要处理一些特效，比如让图标根据不同的状态显示不同的颜色.或者悬停时，对图片的对比度和阴影进行处理。这篇文章有点长，请耐心看完你以为这些是PS软件处理的吗？不不不，纯css写的，厉害了或变色元素。过滤器通常用于调整图像、背景和边框的渲染。MDNCSS标准包含一些已实现预定义效果的功能。过滤器：none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()url|sepia(|));filter:none没有效果，默认filter是nonebrightness(%)线性乘法可以使图片看起来更亮或更暗img{filter:brightness(70%);}contrast(%)contrast调整图像的对比度。img{filter:contrast(50%);}drop-shadow(h-shadowv-shadowblurspreadcolor)为图像设置阴影效果。阴影是合成在图像下方的遮罩的偏移版本，可选择模糊，并涂上特定颜色。函数接受类型的值（定义在CSS3后台），除了“inset”关键字是不允许的。该功能与现有的box-shadowbox-shadow属性非常相似；不同之处在于，一些浏览器通过过滤器提供硬件加速以获得更好的性能。使用这个方案，我们实际上改变了一些图标的颜色，比如一个黑色的图标变成了蓝色的图标。PNG格式小图标的CSS任意着色技术img{filter:drop-shadow(705px00#ccc);}在这里，我们将图片进行投影，形成等大小的灰色区域。hue-rotate(deg)huerotationimg{filter:hue-rotate(70deg);}看，我的小姐姐变身了！invert(%)反转这个函数的作用是将输入图像反转，有点像曝光的效果。img{filter:invert(100%)}grayscale(%)将图像转换为灰度图像。这种效果会使图像变旧。有一种时代沧桑感。喜欢古风的人肯定会喜欢img{filter:grayscale(80%);}这种效果除了古风，还有一种用法有时候需要把整个网站变成灰色，比如大屠杀纪念日。可以这样设置*{filter:grayscale(100%);-webkit-filter:灰度(100%);-moz-filter:灰度(100%);-ms-filter:灰度(100%);-o-filter:grayscale(100%);}sepia(%)把图片转成sepia，给小妹下面的暖色调。img{filter:sepia(50%)}有没有发现我这里没有写url()方法？没错，因为我想把这段内容放在最后。filter:url()是cssfilter镜像的终极换图方式。CSS:filter可以导入一个svg过滤器作为它自己的过滤器。终极变色解决方案！过滤器：网址（）；为什么filter:url()是图片变色的终极解决方案，请允许我慢慢说。先科普一下PS的工作原理。我们都知道网页有R（红）、G（绿）、B（蓝）三种原色。常见的RGBA还包括opicity值，opcity值是根据alpha通道计算的。也就是说，我们看到的网页的每个像素都是由红、蓝、绿、alpha四个通道组成的。我们将每个通道称为调色板。PS中的8位板表示8of2的256次方，表示每个通道的取值范围为(0-255)–SVG研究之路(11)–filter:feColorMatrix如果我们可以改变每个通道的值channel，能不能完美的得到我们想要的？任何你想要的颜色，原则上我们可以像ps一样使用svg滤镜得到我们想要的任何图像，而不仅仅是颜色变化。我们甚至可以凭空生成图像。svgfeColorMatrix大法好不是auerc。img{filter:url(#change);}通过单个通道，我们可以把图片变成单色我们可以通过双通道得到一些非常炫酷的PS效果当然这里只是举个例子，通过配置矩阵中的值，我们可以配置的值每个像素点按照我们定义的规则显示出来，这里详细说一下feColorMatrix矩阵的计算方法，RinGinBina(alpha)是原图中每个像素点的rgba值，通过矩阵计算，得到的RoutGoutBoutAout是最终显示的rgba值。将图片转换为单色。以棕色rgba(140,59,0,1)为例。根据上面的公式，我们可以简化一些计算。在同一行中，只设置一个通道的值。不难得到矩阵0000目标值R0000目标值G0000目标值B00001按照规则，只需要计算，255/通道对应你想要的颜色todisplay=targetvalue我们要的棕色rgba(140,59,0,1)转换成调色板rgba为140590255，可以计算出目标值00000.5500000.230000000001多通道设置炫酷的效果就像我们之前看到的双通道组成的炫酷画面。我们今天要增加图片的饱和度。我们应该怎么做？首先当然是想一下饱和的原因，就是红色更红，蓝色更蓝，绿色更绿。基于这个原因，我们的矩阵可以写成如下形式。我们可以看到矩阵1中出现了3和-，一定很无聊吧。这是怎么发生的？原理其实很好理解。假设某个像素点的RGB分别为(200/255),(100/255),(50/255),渲染出来应该有点暗橙色，矩阵转换后R变成200/255×3-100/255-50/255=1.76，G变为200/255x(-1)+100/255*3-50/255=0.2，B变为200x(-1)+100x(-1)+50×3=-0.59，所以RGB转换后为：200×1.76、100×0.2、50x-0.5。SVG研究之路（十一）——filter:feColorMatrix除了FecolorMatrixSVG滤镜之外的其他方案还有很多方法定义过滤器，它们也可以应用于图片。限于篇幅，这里就不详细展开了。小结CSS3提供了filter属性，可以通过前端技术实现更炫酷的特效。依赖svgfilters，我们可以实现复杂的滤镜效果注意css:filter和ie上的filter不是同一个概念css:filter在不同的浏览器上有不同的兼容性，使用时需要注意浏览器兼容性参考SVG研究之路（11)–filter:feColorMatrixcss:filterMDNColorFiltersCanTurnYourGraySkiesBluePNG小图标CSS任意颜色着色技术写在这个源码的最后我已经放在codePen上了https://codepen.io/nanhupatar。..欢迎查看文章，难免有疏漏，希望大家指正批评
