利用CSS改变图片颜色的100种方法！

pinecone 发布于2019-08-30 15:54 / 3396人阅读

摘要：前言说到对图片进行处理，我们经常会想到这类的图像处理工具。或者是的时候，对图片的对比度，阴影进行处理。过滤器通常被用于调整图片，背景和边界的渲染。最后，安利我们的公众号前端指南。

前言

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

你以为这些是经过PS软件处理出来的？不不不，纯粹的是用css写出来的，很神奇把。

强大的 CSS:filter

CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN

CSS标准里包含了一些已实现预定义效果的函数。

filter: none        
    | blur() 
    | brightness() 
    | contrast() 
    | drop-shadow() 
    | grayscale() 
    | hue-rotate() 
    | invert() 
    | opacity() 
    | saturate() 
    | sepia() 
    | url();

通过双通道我们可以的到一些非常炫酷的PS效果

当然，在这里，只是举个例子，通过配置矩阵中的值，我们可以配置每一个像素点的值按照我们定义的规则显示

我们在这里详细讲一下feColorMatrix 矩阵的计算方式

其中Rin Gin Bin a(alpha) 为原始图片中每个像素点的rgba值

通过矩阵计算，得到的Rout Gout Bout Aout就是最终显示出来的rgba值。

将图片转为单色拿棕色rgba(140,59,0,1)作为例子

根据上面的公式，我们可以简化一些计算，同一行中，只设置一个通道的值，其他通道为0

不难得出矩阵

0 0 0 0 目标值R
0 0 0 0 目标值G
0 0 0 0 目标值B
0 0 0 0 1

根据规则，只需要计算，255/想要显示的颜色对应通道 = 目标值

我们想要的棕色rgba(140,59,0,1) 换算成色板 rgba 为 140 59 0 255

可以算出目标值

0 0 0 0 0.55
0 0 0 0 0.23
0 0 0 0 0 
0 0 0 0 1

多通道设置出炫酷的效果来

就如同之前我们看到的双通道形成的炫酷图片一般

我們今天要把圖片的飽和度提高，該怎麼做呢？首先當然是想想飽和度的成因，就是紅的越紅，藍的越藍，綠的越綠，由這個成因出發，我們的矩陣就可以寫成下面的樣子，看到矩陣當中出現了 3 和 -1，一定會很那悶這是怎麼來的，箇中原理其實很容易理解，讓我們假設某一個像素的 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 研究之路 (11) - filter:feColorMatrix

其他方案

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

总结

css3提供了filter这个属性，使得通过前端技术实现更多炫酷的特效成为了可能

依赖于svg的滤镜，我们可以实现复杂的滤镜效果

注意

css：filter与ie上的filter并不是相同的概念

css:filter在不同的浏览器上兼容性不一样，您在使用的时候需要注意浏览器的兼容性

参考文献

SVG 研究之路 (11) - filter:feColorMatrix

css:filter MDN

Color Filters Can Turn Your Gray Skies Blue

PNG格式小图标的CSS任意颜色赋色技术

写在最后

本次源码我已经放在了codePen上 https://codepen.io/nanhupatar... 欢迎查看

文章难免会有疏漏，希望大家能够指正批评。如果您觉得本文对您有帮助，请点个赞支持作者。

最后，安利我们的公众号：前端指南。致力于前端技术分享，精品文章，深度好文，同时也欢迎您给我们投稿，本公众号用户留存率95%哦，对了，更新时间是每天早上六点

转载请注明出处与作者，原创不易，欢迎转载

idc机房托管超融合服务器改变背景颜色图片的颜色处理在家赚钱的十种方法数据迁移的四种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116974.html

利用CSS改变图片颜色的100种方法！

摘要：前言说到对图片进行处理，我们经常会想到这类的图像处理工具。或者是的时候，对图片的对比度，阴影进行处理。过滤器通常被用于调整图片，背景和边界的渲染。最后，安利我们的公众号前端指南。前言说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影...

Keven 2019-08-02 16:06 评论0 收藏0
CSS学习笔记

CSS学习笔记在学习CSS的过程中做的一些记录，用于未来的快速回忆。 HTML常见元素和理解 head中的元素指定字符集 meta name=viewport content=...定义视图大小与设备屏幕大小的比例，用户是否可缩放指定基准路径 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 评论0 收藏0
web前端（11）—— 页面布局1

摘要：维护起来更加方便不足雪碧的最大问题是内存使用拼图维护比较麻烦使的编写变得困难雪碧调用的图片不能被打印我们可以使用综合属性制作通天，什么是通天呢，就是一般我们电脑的屏幕都是但是设计师给我们的图都会比这个大，那么我们可以此属性来制作通天。要说页面布局的话，那就必须说说margin，padding，和background。这三个属性其实都是前面讲过的，这里还是再次讲解以下，为什么呢？因为是这样的...

番茄西红柿 2019-04-23 13:11 评论0 收藏0
HTML5 canvas专栏

摘要：一元素元素绘图的功能是通过其身上的对象表现出来的，该环境变量可以从元素上获取。如果绘图表面大小与元素大小不一致，浏览器会自动对绘图表面进行缩放，使之符合元素大小。一. Canvas元素 Canvas元素绘图的功能是通过其身上的context对象表现出来的，该环境变量可以从Canvas元素上获取。 html: Canvas not supported css: bod...

MudOnTire 2019-08-05 17:52 评论0 收藏0
聊聊网页中的图片

摘要：使用的场景多为页面内容的图片，较大的头图，颜色过多的图片。就是页面中的背景，并不是内容，修饰作用。 warn: 这是一篇没有一张图片的讲图片的文章 1. 图片格式通常在网页中使用的图片有三种格式，jpg，png和gif。jpg是有损压缩格式，就算你在ps里用100%质量保存，保存多次会产生质量损失，而png和gif则不会。因此如果开发者相对图片进行微处理，改动jpg不是明智的选择。p...

Meathill 2019-08-28 18:18 评论0 收藏0