使用CSS改变图片颜色的100种方法(值得收藏)

前言

“说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。”

<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效果

其中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>

其他方案

除了feColorMatrix svg滤镜还有很多的方法可以定义滤镜,他们同样可以作用到图片上。由于篇幅限制,这里就不详细展开了

总结 css3提供了filter这个属性,使得通过前端技术实现更多炫酷的特效成为了可能 依赖于svg的滤镜,我们可以实现复杂的滤镜效果 注意 css:filter与ie上的filter并不是相同的概念 css:filter在不同的浏览器上兼容性不一样,您在使用的时候需要注意浏览器的兼容性

总结

以上所述是小编给大家介绍的使用CSS改变图片颜色的100种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

使用CSS改变图片颜色的100种方法(值得收藏)

扫一扫手机访问