前言》说到图片处理，我们往往会想到PhotoShop等图片处理工具。作为前端开发者，我们经常需要处理一些特效，比如让图标根据不同的状态显示不同的颜色.或者悬停时，对图片的对比度和阴影进行处理。你以为这些是用PS软件处理的吗？不不不，纯css写的，太神奇了图片、背景、边框的渲染，MDNCSS标准中包含了一些实现预定义效果的函数filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();filter:none没有作用，默认filter为nonefilter:blur()高斯模糊赋予图像高斯模糊效果，length值越大越模糊image让我们试试img{filter:blur(2px);;}brightness(%)线性乘法可以使图像看起来更亮或更暗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研究之路（十一）——filter:feColorMatrix如果我们可以改变每个通道的取值，可以我们得到我们想要的完美？原则上我们可以像ps一样使用svg滤镜得到我们想要的任何图像，而不仅仅是颜色变化。我们甚至可以凭空生成图像。svgfeColorMatrix大法好img{filter:url(#change);}通过单通道，我们可以把图片改成单色我们可以通过双通道得到一些非常炫酷的PS效果当然这里只是举个例子，通过配置里面的值矩阵，我们可以配置每个像素的值，按照我们定义的规则显示。这里详细说一下feColorMatrix矩阵的计算方法。RinGinBina(alpha)是原始图像中每个像素的r。通过矩阵计算gba值，得到的RoutGoutBoutAout就是最终显示的rgba值将图片转为单色以棕色rgba(140,59,0,1)为例根据上面的公式，我们可以简化一些计算，在同一行中，只设置一个通道的值，其他通道为0。不难得到矩阵0000目标值R0000目标值G0000目标值B00001按照规则，只需要计算，255/你要显示的颜色对应的通道=目标值我们要的棕色rgba(140,59,0,1)转换成调色板rgba为140590255，可以计算出目标值00000.5500000.230000000001之前看到的双通道，今天想增加画面的饱和度，应该怎么做呢？首先当然是想一下饱和的原因，就是红色更红，蓝色更蓝，绿色更绿。基于这个原因，我们的矩阵可以写成如下形式。我们可以看到矩阵1中出现了3和-，一定很无聊吧。这是怎么发生的？原理其实很好理解。假设某个像素点的RGB分别为(200/255),(100/255),(50/255),渲染应该有点暗橙色,矩阵转换后R变成200/255x3-100/255-50/255=1.76，G变成200/255x(-1)+100/255*3-50/255=0.2，B变成200x(-1)+100x(-1)+50x3=-0.59，所以RGB转换后为：200x1.76,100x0.2,50x-0.5。SVG研究之路（十一）——filter:feColorMatrix除feColorMatrixsvgfilter之外的其他方案还有定义过滤器的方法很多，它们也可以应用于图片。限于篇幅，这里不做详细总结。CSS3提供了filter属性，使得依赖svg滤镜通过前端技术实现更炫酷的特效成为可能。我们可以实现复杂的滤镜效果。注意css:Filter和ie上的filter不是同一个概念css:filter在不同的浏览器上有不同的兼容性，使用时需要注意浏览器兼容性参考SVG研究之路（11）-filter:feColorMatrixcss:filterMDNColorFiltersCanTurnYourGreySkiesBluePNG格式小图标CSS任意颜色着色技术写在最后。源码我已经放在codePen上了https://codepen.io/nanhupatar...欢迎查看文章，难免有疏漏之处，希望大家指正批评指正。如果您觉得本文对您有帮助，请点赞支持作者。最后安利一下我们的公众号：前端攻略。致力于前端技术分享，优质文章，深度文章，也欢迎大家投稿。这个公众号的用户留存率为95%。对了，更新时间是每天早上6:00。不易，欢迎转载
