1. 前言
在前些时间里，我在博客里发了一篇《用CSS实现二维码滑动解锁》的文章，有很多小伙伴们留言问我，在二维码上怎么加渐变色呢？所以今天就来分享一下，怎么巧用CSS给普通黑色二维码添上彩色渐变。
2. 实现原理
在二维码的识别码的组成中，每个小黑点和小白点的大小不能随意改变，因此要实现二维码上的渐变效果，我们只能用CSS来半透明处理整个图片的方式来实现。
3. 渐变图片的生成
3.1 制作二维码
首先我们需要制作出一个普通二维码，然后用CSS将其样式改成半透明。可以使用在线生成二维码的网站，比如我喜欢使用的是这个草料二维码，别的类似的网站也都可以，这里不再赘述。
3.2 CSS样式
然后我们将二维码的CSS样式改成半透明的背景，然后再使用CSS中的渐变背景实现一个彩色的渐变，这样就可以将渐变背景与二维码合成图层。
/* 将二维码改为半透明背景 */
.qrcode img {
opacity: 0.8;
}
/* 添加渐变背景 */
.qrcode:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right top, rgba(56,39,216,{{temperature}}), rgba(155,214,245,{{temperature}}));
mix-blend-mode: overlay;
}
其中，mix-blend-mode: overlay是关键属性，它可以让渐变背景合成与底部元素的界面。
3.3 temperature变量
在上面的代码中，有一个很奇怪的属性{{temperature}}，它是渐变的透明度值。我们在less文件中定义一个变量，再在CSS样式中调用这个变量，就可以通过改变变量的值来改变渐变的透明度。
@temperature: 0.6; /* 设置渐变透明度为0.6 */
/* 添加渐变背景 */
.qrcode:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right top, rgba(56,39,216,{{temperature}}), rgba(155,214,245,{{temperature}}));
mix-blend-mode: overlay;
}
4. 细节优化
4.1 兼容性优化
因为mix-blend-mode属性的兼容性问题，如果在某些浏览器中不能使用这个属性，那么渐变图片和二维码会重叠在一起。为了解决这个问题，我选择先在半透明二维码上添加一层空<div>，再使用这个空<div>来显示渐变背景，最后再将mix-blend-mode属性应用在这个空<div>上。
/* 将空div添加到二维码上 */
.qrcode {
position: relative;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* 添加渐变背景 */
.mask:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right top, rgba(56,39,216,{{temperature}}), rgba(155,214,245,{{temperature}})));
mix-blend-mode: overlay;
}
4.2 快速生成渐变背景代码
上述的渐变代码看起来有些冗长繁琐，因此我们可以使用Colorzilla渐变编辑器这个工具，它可以很快地生成出我们需要的渐变代码。在这里特别感谢一下Colorzilla团队提供的这个便利工具。
5. 最终效果图
最后，让我们来看看我们巧妙地使用CSS给普通二维码添上彩色渐变的最终效果图。
6. 总结
今天我们通过制作一个普通二维码，在其上添加一个半透明背景，然后使用CSS的渐变背景实现半透明渐变效果，从而给普通黑色二维码添上了色彩渐变，同时又可以很容易地通过调整渐变透明度值来改变渐变效果。在我们的网页设计中，CSS总是有着无限的可能，这只是其中的一种巧妙应用。