利用CSS改变图片颜色的多种方法!

  • 时间:2018-09-19 23:11 作者:嫣然呀呀呀 来源:嫣然呀呀呀 阅读:243
  • 扫一扫,手机访问
摘要:前言“说到对图片进行解决,我们经常会想到PhotoShop这类的图像解决工具。作为前台开发者,我们经常会需要解决少量特效,例如根据不同的状态,让图标显示不同的颜色。或者者是hover的时候,对图片的比照度,阴影进行解决。”你以为这些是经过PS软件解决出来的?不不不,纯粹的是用css写出来的,很神奇把

前言

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

利用CSS改变图片颜色的多种方法!

你以为这些是经过PS软件解决出来的?不不不,纯粹的是用css写出来的,很神奇把。

强大的 CSS:filter

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

CSS标准里包含了少量已实现预约义效果的函数。

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

原图
复制代码
利用CSS改变图片颜色的多种方法!

filter: none

没有任何效果,默认filter就为none

filter:blur( ) 高斯模糊

给图像一个高斯模糊效果,length值越大,图像越模糊

我们来尝试一下

img {
filter:blur(2px);;
}
复制代码
利用CSS改变图片颜色的多种方法!

brightness(%) 线性乘法

可以让图片看起来更亮或者者更暗

img {
filter:brightness(70%);
}复制代码
利用CSS改变图片颜色的多种方法!

contrast(%) 比照度

调整图像的比照度。

img {
filter:contrast(50%);
}复制代码
利用CSS改变图片颜色的多种方法!

drop-shadow(h-shadow v-shadow blur spread color)

给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很类似;不同之处在于,通过滤镜,少量浏览器为了更好的性能会提供硬件加速

利用这个方案,我们其实改变相似于少量图标的颜色,比方黑色的图标变成蓝色的图标。

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

img {
filter: drop-shadow(705px 0 0 #ccc);
}
复制代码

在这里,我们将图片投影形成一个同等大小的灰色区域。

利用CSS改变图片颜色的多种方法!

hue-rotate(deg) 色相旋转

img {
filter:hue-rotate(70deg);
}
复制代码

看,我的小姐姐变成了阿凡达!

利用CSS改变图片颜色的多种方法!

invert(%) 反转

这个函数的作用是反转输入图像,有点像曝光的效果

img {
filter:invert(100%)
}
复制代码
利用CSS改变图片颜色的多种方法!

grayscale(%) 将图像转换为灰度图像

这个效果可以将图片做旧,有一种时代沧桑感。喜欢古风的人肯定会喜欢上这个效果的

img {
filter:grayscale(80%);
}复制代码
利用CSS改变图片颜色的多种方法!

除了古风还有一种用法是有的时候需要将全站变成灰色,如大屠杀纪念日的时候。

利用CSS改变图片颜色的多种方法!

可以这样设置

*{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
复制代码

sepia(%) 将图像转换为深褐色

下面给我的小姐姐一个暖暖的色调。

img {
filter:sepia(50%)
}
复制代码
利用CSS改变图片颜色的多种方法!

大家是不是发现我并没有把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大法好









复制代码
img {
filter:url(#change);
}
复制代码

通过单通道我们可以将图片变成单一的颜色

利用CSS改变图片颜色的多种方法!








复制代码

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

利用CSS改变图片颜色的多种方法!

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

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

利用CSS改变图片颜色的多种方法!

其中Rin Gi

n 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在不同的浏览器上兼容性不一样,您在使用的时候需要注意浏览器的兼容性
利用CSS改变图片颜色的多种方法!


此文转载

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
【系统环境|软件环境】前台开发WebStorm常用快捷键,火速收藏!(2019-12-04 14:25)
【系统环境|软件环境】微博H5登录和发微博组件(2019-12-04 14:25)
【系统环境|软件环境】5分钟谈前台面试,小伙伴都惊呆了(2019-12-04 14:23)
手机二维码手机访问领取大礼包
返回顶部