说到处理图像，我经常想到像PhotoShop这样的图像处理工具。
作为前端开发人员，您通常需要处理一些特殊效果，例如根据状态在图标上显示不同的颜色。 或hover时，处理图像的对比度、阴影。
//黑白img { transition: all .3s ease； 过滤器： gray scale (100 %； opacity:6； (//正常颜色img:Hover ) Filter:none； opacity: 1； }让我们来谈谈只需一句代码就能实现图像褪色功能的强大的CSS过滤器。
“CSS滤镜”(filter )提供模糊、锐化和元素变色等图形效果。 过滤器通常用于调整图像、背景和边界的渲染。 CSS标准包含实现预定义效果的函数。
过滤器： none (() ) )
filter: none
如果没有效果，默认过滤器为none
filter:blur() 高斯模糊
对图像施加高斯模糊效果时，length值越大，图像越模糊
img{Filter:blur(2px； }
brightness(%) 线性乘法
可以使图像看起来明亮，也可以使图像看起来暗
img{filter:brightness(70%； }
contrast(%) 对比度
调整图像的对比度。
img{Filter:contrast(50%； }
drop-shadow(h-shadow v-shadow blur spread color)
为图像设置阴影效果。 阴影是蒙版贴图的偏移版本，可以在图像下方合成、进行模糊处理，并可以用特定颜色绘制。 函数接受" inset "关键字以外的其他类型的值。 在CSS3的背景中定义。 此函数与现有的box-shadow box-shadow属性非常类似； 不同之处在于，过滤器允许某些浏览器提供硬件加速以提高性能
利用这个方案，我们其实会改变一些图标一样的颜色，比如黑色图标变成蓝色图标。
PNG格式小图标的CSS任意颜色赋色技术
img { filter : drop-shadow (705 px0 # CCC )； 在这里，投影图像形成同样大小的灰色区域。
hue-rotate(deg) 色相旋转
img { filter : hue-rotate (70 deg )； }
invert(%) 反转
此函数的作用类似于曝光的效果，即反转输入图像
img{filter:invert(100%} )
grayscale(% )将图像转换为灰度图像
这个效果可以让照片变旧，有时代的沧桑感。 喜欢古风的人一定会喜欢这个效果的
img{Filter:grayscale(80%； }
sepia(%) 将图像转换为深褐色
下面给我姐姐温暖的色调。
img{Filter:sepia(50%} )
大家注意到我没有在这个上面写url ()方法吗
是的，因为我想把这个内容作为最后。 filter:url ()是css滤镜改变图像的终极方法。 CSS :过滤器可以将svg过滤器作为自己的过滤器导入。
终极变色解决方案！ filter:url();
请让我慢慢说明为什么filter:url ()是图像变色的终极解决方案。
首先，科学地看看PS的工作原理。 我们知道网页上有三原色的r (红(g (绿) b )蓝)。 常见的RGBA还包括opicity值，但opcity值是根据alpha通道计算的。 也就是说，我们看到的网页中的每个像素点都由红、蓝、绿加上alpha四个通道组成，每个通道都称为色板。 PS的8位板意味着2的8次方256，每个通道的可能值范围为[0- 255 ]SVG研究之路[ 11 ]filter 3360 Fe cool
如果能改变各个频道的值，不是就能完美地得到我们想要的任意颜色吗？ 原理上，可以像ps一样使用sv
g滤镜得到任何我们想要的图像，不仅仅是变色。我们甚至可以凭空生成一幅图像。svg feColorMatrix
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix type="matrix" values=" 0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs></svg><img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">img { filter:url(#change);}通过单通道我们可以将图片变成单一的颜色
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter> </defs></svg>通过双通道我们可以的到一些非常炫酷的PS效果
当然，在这里，只是举个例子，通过配置矩阵中的值，我们可以配置每一个像素点的值按照我们定义的规则显示
我们在这里详细讲一下feColorMatrix 矩阵的计算方式
其中Rin Gi
n Bin a(alpha) 为原始图片中每个像素点的rgba值
通过矩阵计算，得到的Rout Gout Bout Aout就是最终显示出来的rgba值。
将图片转为单色 拿棕色rgba(140,59,0,1)作为例子
根据上面的公式，我们可以简化一些计算，同一行中，只设置一个通道的值，其他通道为0
不难得出矩阵
0 0 0 0 目标值R0 0 0 0 目标值G0 0 0 0 目标值B0 0 0 0 1根据规则，只需要计算，255/想要显示的颜色对应通道 = 目标值
我们想要的棕色rgba(140,59,0,1) 换算成色板 rgba 为 140 59 0 255
可以算出目标值
0 0 0 0 0.550 0 0 0 0.230 0 0 0 0 0 0 0 0 1多通道设置出炫酷的效果来
就如同之前我们看到的双通道形成的炫酷图片一般
我們今天要把圖片的飽和度提高，該怎麼做呢？首先當然是想想飽和度的成因，就是紅的越紅，藍的越藍，綠的越綠，由這個成因出發，我們的矩陣就可以寫成下面的樣子，看到矩陣當中出現了 3 和 -1，一定會很那悶這是怎麼來的，箇中原理其實很容易理解，讓我們假設某一個像素的 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 研究之路 (11) – filter:feColorMatrix
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix values="3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0" /> </filter> </defs></svg>web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路其他方案
除了feColorMatrix svg滤镜还有很多的方法可以定义滤镜，他们同样可以作用到图片上。由于篇幅限制，这里就不详细展开了
总结
css3提供了filter这个属性，使得通过前端技术实现更多炫酷的特效成为了可能
依赖于svg的滤镜，我们可以实现复杂的滤镜效果
你学会了吗？反正我已经晕了。。。