前言
在多主题的系统中，需要不同颜色的icon，如何通过css任意来改变icon的颜色呢？本文提供了三种改变icon图片颜色的方法。
方法一：多背景混合方法
原理是：background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。 其中background-blend-mode: lighten 表示，最终颜色是每个颜色通道下，两个背景色最亮值所组成的颜色。比如，将颜色rgb(111,150,222)和颜色rgb(222,111,34)进行lighten混合，最终的颜色值是取各通道下最大值组成。因此混合颜色为rgb(222,150,222)。
由于，黑色rgb(0,0,0)的每个通道都是0，因此黑色与任何颜色进行lighten混合，都是该颜色。 白色rgb(255,255,255)的每个通道都是255，因此白色与任何颜色进行lighten混合，都是白色。
基于上述分析，我们可以很容易地将一个白色背景的黑色图片改变颜色。
- 第一步：将白底黑色的图片作为元素的背景图。
- 第二步：给元素设置一个背景色，这个颜色就是要改变icon图片的颜色。
- 第三步：给元素设置background-blend-mode:lighten，将背景色和背景图混合。
.icon1{
height: 100px;
width: 100px;
background-image:url(./Flamingo.jpg);
background-color: red;
background-blend-mode:lighten;
background-size: cover;
}
方法二：子元素和父元素背景混合方法
子元素和父元素背景混合方法，与多背景混合方法类似。不同之处在于，mix-blend-modeCSS 属性描述了元素的背景与其直系父元素的背景混合。
mix-blend-mode:lighten也表示，最终颜色为两个背景色各通道中最亮值所组成的颜色。
- 第一步：将白底黑色的图片作为子元素的背景图。
- 第二步：给父元素设置一个背景色，这个颜色就是要改变icon图片的颜色。
- 第三步：给子元素设置mix-blend-mode:lighten，将父子元素的两个背景混合。
.container{
background: red;
display: inline-block;
}
.icon2{
height: 100px;
width: 100px;
background-image:url(./Flamingo.jpg);
mix-blend-mode: lighten;
background-size: cover;
}
方法三：滤镜方法
红色在色轮中色相hue为0deg。如改变颜色，只需调整改变色相度数。css3 filter滤镜，提供了filter: hue-rotate()色相旋转放方法。可以利用滤镜hue-rotate方法改变图片颜色。更多关于色轮、色相和色相旋转等更多知识请参看这篇博文
红色的HSL值为hsl(0, 50 , 100)，通过调整hue度数,可以得到不同的纯色，如旋转120度得到绿色hsl(120, 50 , 100)。为了方便起见，我们初定图片为红色，通过filter: hue-rotate()，可以得到任意颜色。如果目标颜色不是纯色，可以相应的调整饱和度filter:saturate()和明亮度filter:brightness()的值。
将红色图片，通过旋转120度便为你绿色。
.icon3{
height: 100px;
width: 100px;
filter: hue-rotate(120deg);
}
实例代码及图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.icon1{
height: 100px;
width: 100px;
background-color: red;
background-image:url(./Flamingo.jpg);
background-blend-mode:lighten;
background-size: cover;
}
.container{
background: red;
display: inline-block;
}
.icon2{
height: 100px;
width: 100px;
background-image:url(./Flamingo.jpg);
mix-blend-mode: lighten;
background-size: cover;
}
.icon3{
height: 100px;
width: 100px;
filter: hue-rotate(120deg);
}
.icon4{
width: 500px;
height: 50px;
background-color: rgb(111,150,222);
background-image: linear-gradient(rgb(222,111,34), rgb(222,111,34));
background-blend-mode: lighten;
}
.icon5{
width: 500px;
height: 50px;
background-color: rgb(255,255,255);
background-image: linear-gradient(blue, blue);
background-blend-mode: lighten;
border: 1px solid #ccc;
}
.icon6{
width: 500px;
height: 50px;
background-color: rgb(0,0,0);
background-image: linear-gradient(blue, blue);
background-blend-mode: lighten;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<p>多背景混合方法原理</p>
<div class="icon4">rgb(111,150,222) + rgb(222,111,34) = rgb(222,150,222)</div>
<div class="icon5">rgb(255,255,255) + rgb(0, 0, 255) = rgb(255, 255, 255)</div>
<div class="icon6">rgb(0,0,0) + rgb(0, 0, 255) = rgb(0, 0, 255)</div>
<p>方法一：多背景混合方法</p>
<div class="icon1"></div>
<p>方法二：子元素和父元素背景混合方法</p>
<div class="container">
<div class="icon2"></div>
</div>
<p>方法三：滤镜方法</p>
<img class="icon3" src="./Flamingo1.png">
</body>
</html>
总结
- 方法一和方法二都是基于混合，提供的图片最好是白底黑图。
- 方法二基于css filter滤镜，提供的图片最好是红色的图片。
- 以上方法，都需要注意兼容性,IE浏览器不支持。。。
