摘要:前言说到对图片进行处理,我们经常会想到这类的图像处理工具。或者是的时候,对图片的对比度,阴影进行处理。过滤器通常被用于调整图片,背景和边界的渲染。最后,安利我们的公众号前端指南。
前言
“说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。”
你以为这些是经过PS软件处理出来的?不不不,纯粹的是用css写出来的,很神奇把。
强大的 CSS:filterCSS滤镜(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%哦,对了,更新时间是每天早上六点
转载请注明出处与作者,原创不易,欢迎转载
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54664.html
摘要:前言说到对图片进行处理,我们经常会想到这类的图像处理工具。或者是的时候,对图片的对比度,阴影进行处理。过滤器通常被用于调整图片,背景和边界的渲染。最后,安利我们的公众号前端指南。 前言 说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影...
摘要:维护起来更加方便不足雪碧的最大问题是内存使用拼图维护比较麻烦使的编写变得困难雪碧调用的图片不能被打印我们可以使用综合属性制作通天,什么是通天呢,就是一般我们电脑的屏幕都是但是设计师给我们的图都会比这个大,那么我们可以此属性来制作通天。 要说页面布局的话,那就必须说说margin,padding,和background。这三个属性其实都是前面讲过的,这里还是再次讲解以下,为什么呢?因为是这样的...
阅读 1945·2021-09-22 16:05
阅读 9116·2021-09-22 15:03
阅读 2856·2019-08-30 15:53
阅读 1683·2019-08-29 11:15
阅读 886·2019-08-26 13:52
阅读 2331·2019-08-26 11:32
阅读 1751·2019-08-26 10:38
阅读 2523·2019-08-23 17:19