下面给我的小姐姐一个暖暖的色调。
1 2 3 |
|
大家是不是发现我并没有把url()方法写到这上面来
没错，因为我想把这个内容放到最后来说，filter:url()就是css滤镜改变图片的终极方法。CSS:filter可以导入一个svg滤镜，作为他自己的滤镜。
终极变色解决方案！ filter:url();
为什么说filter:url()是图片变色的终极解决方案呢，请容我慢慢道来。
我们先科普一下PS的工作原理，我们都知道网页是有三原色的R(红) G(绿) B(蓝)，常见的RGBA还包括一个opicity值，而opcity值是根据alpha通道计算出来的。也就是说，我们见到的网页的每一个像素点都是由红蓝绿再加alpha四个通道组成，每一个通道我们称之为色板，PS中的8位板的意思就是2的八次方256，意思就是每一个通道的取值范围都是(0-255) SVG 研究之路 (11) - filter:feColorMatrix
如果我们可以改变每个通道的值是不是就能完美的得到我们想要的任意颜色了呢，原理上，我们可以像ps那样利用svg滤镜得到任何我们想要的图像，不仅仅是变色。我们甚至可以凭空生成一幅图像。
svg feColorMatrix大法好
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 |
|
通过单通道我们可以将图片变成单一的颜色
1 2 3 4 5 6 7 8 9 10 |
|
通过双通道我们可以的到一些非常炫酷的PS效果
当然，在这里，只是举个例子，通过配置矩阵中的值，我们可以配置每一个像素点的值按照我们定义的规则显示
我们在这里详细讲一下feColorMatrix 矩阵的计算方式
其中Rin Gi
n Bin a(alpha) 为原始图片中每个像素点的rgba值
通过矩阵计算，得到的Rout Gout Bout Aout就是最终显示出来的rgba值。
将图片转为单色 拿棕色rgba(140,59,0,1)作为例子
根据上面的公式，我们可以简化一些计算，同一行中，只设置一个通道的值，其他通道为0
不难得出矩阵
1 2 3 4 |
|
根据规则，只需要计算，255/想要显示的颜色对应通道 = 目标值
我们想要的棕色rgba(140,59,0,1) 换算成色板 rgba 为 140 59 0 255
可以算出目标值
1 2 3 4 |
|
总结
- css3提供了filter这个属性，使得通过前端技术实现更多炫酷的特效成为了可能
- 依赖于svg的滤镜，我们可以实现复杂的滤镜效果
注意
- css：filter与ie上的filter并不是相同的概念
- css:filter在不同的浏览器上兼容性不一样，您在使用的时候需要注意浏览器的兼容性
推荐学习：css视频教程
以上就是css如何改变图片的颜色的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
浅谈css grid比bootstrap更适合创建布局的原因
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
