CSS 滤镜：更改图像颜色的不同方法：filter 根：url()

强大的 CSS：filter

CSS 滤镜 (filter) 为图像提供特殊效果，例如模糊、突出显示或元素颜色。滤镜通常用于调整图像输出、背景和边框。

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

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

<!--html-->
<img  alt="原图">
复制代码

filter：无

没有效果。默认filter为无

filter：blur（）高斯模糊

给图像赋予高斯模糊效果。长度值越大，图像越暗

来试试

img {
    filter:blur(2px);;
}
复制代码

亮度(%) 线性乘法

可以使图像变亮或变暗

img {
    filter:brightness(70%);
}复制代码

对比度(%) 对比度♷与图片。

img {
    filter:contrast(50%);
}复制代码

drop-shadow（h-shadow v-shadow blur扩散颜色）

对图像应用阴影效果。阴影集成在图像下方，可以是哑光的暗淡胶印版本，可以涂上特殊颜色。该函数接受 类型的值（在 CSS3 上下文中定义），但不允许使用“inset”关键字。该功能与现有的 box-shadow box-shadow 属性类似；不同之处在于，通过过滤器，某些浏览器将提供声音增强以获得更好的性能

使用此解决方案我们可以更改图标的颜色，例如黑色图标变成蓝色图标。

PNG小图标的CSS不规则颜色着色技术

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

这里，我们对图像进行格式化，以创建相同大小的绿色区域。

hue-rotate(deg) 色调旋转

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

快看，我的妹妹变成了阿凡达！

invert(%) 反转

该函数的作用是对输入图像进行反转，类似于曝光效果

img {
    filter:invert(100%)
}
复制代码

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

制作旧图像，用气候变化的感觉。喜欢旧款的人一定会很喜欢这款产品

img {
    filter:grayscale(80%);
}复制代码

除了旧款，还有其他的使用方式。有时有必要将整个网站变成灰色，例如在大屠杀纪念日。

可以这样设置

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

sepia(%)，把图片改成棕褐色

下面给小妹妹一个温暖的色调。

img {
    filter:sepia(50%)
}
复制代码

你注意到我没有写上面的url()方法吗？

是的，因为我想把这个内容放到最后。 filter： url() 是 css 过滤器更改图像的方式。最后一个方法。 CSS：filter可以导入 svg 滤镜作为自己的滤镜。

终极变色解决方案！ filter:url();

为什么filter:url()是图像转换的终极解决方案？请允许我慢慢解释。

我们先来了解一下PS的工作原理。我们都知道网页有三种基本颜色：R（红）G（绿）B（蓝）。标准RGBA也有不透明度值，不透明度值是根据Alpha通道计算的。从。换句话说，我们看到的网页上的每个像素都是由四个通道组成的：红色、蓝色、绿色以及 Alpha。每个通道称为一个调色板。 PS的8位调色板表示2-8。 256次方，也就是说每个通道的值为(0-255) SVG研究之路(11) - filter：feColorMatrix

如果我们可以改变每个通道的值，是否能得到完美的结果呢？我们可以有任何我们想要的颜色。基本上我们可以像PS一样使用svg滤镜来得到我们想要的图像，而不仅仅是颜色的变化。我们甚至可以凭空创造图像。

svg feColorMatrix 很好

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="change">
                <feColorMatrix type="matrix" values="
                0 0 0 0 0.55
                0 0 0 0 0.23 
                0 0 0 0 0 
                0 0 0 0 1" />
        </filter>
    </defs>
</svg>
<img  alt="">

复制代码

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

使用单通道我们可以将图像转换为单色

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

当然，这里给出例如，通过设置矩阵中的值，我们可以根据我们定义的规则来调整每个像素要显示的值

这里我们详细讲讲如何计算feColorMatrix矩阵

其中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研究之路（十一）——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滤镜之外，定义滤镜的方式还有很多，也可以应用到图像上。由于篇幅限制，这里就不详细说了，用svg滤镜就可以了。硬滤镜效果

注意

• css：filter和IE中的filter不一样
• css：filter在不同浏览器中的兼容性不同，使用时需要小心浏览器兼容性

作者：前面攻略公众号
链接：https://juejin.im/post/5ba21d78f265da0af0337fe3
来源：掘金
版权归作者所有。如需商业印刷，请联系作者以获得许可。非商业转载请注明来源。