使用CSS线性渐变生成彩虹图

[jabez128]

之前在美国同性婚姻在全美合法之后，社交网络上很多人为了表达自己对同性婚姻的支持，纷纷将自己的头像换成了彩虹图。如下图所示：

很多生成彩虹图的JS库也应运而生，比如说国外的有prideify.js。predeify这个库的基本原理是把图片画到canvas上，生成彩虹图以后再使用canvas的toDataURL方法将图片转换为base64格式，再替换原有图片的src。

线性渐变并不是一个新的css属性，但是在过去的项目中并没有使用过它。在今天团队的一次内部分享会上有同学介绍了一些线性渐变的使用技巧，我觉得这个属性很实用，就用这个属性做了一个彩虹图。原理和写法都非常简单。

首先简单回顾一下线性渐变的语法：

background: -webkit-linear-gradient(start_point，from_color，to_color)

start_point的取值可以是角度，比如30deg，也可以是预设值top、bottom、left、right，或者预设值两两组合比如top left。而from_color则是渐变色起点，to_color是渐变色终点。比如我们这么写：

background: -webkit-linear-gradient(top, red, green);

这样元素背景将会自上而下颜色由red线性渐变为green。

渐变的颜色可以多个，并在可以指定颜色停顿的位置，所以可以这么写：

background: -webkit-linear-gradient(top, red , yellow 50%, green);

这样元素的背景将会从上到下由red线性渐变，在50%的地方变为yellow，继续线性渐变为green。

如果我们在制定停顿的地方做一点变化：

background: -webkit-linear-gradient(top, red  50%, green 50%);

这样元素的背景将会在50%的地方划分为上下两个部分，上面为red，下面为green，从视觉上来看没有发生渐变。

了解了上面这么多，我们就可以来用线性渐变生成彩虹图了。元素为一个div：

  <div class="rainbow"></div>

接下来用背景图将图片加载进div中:

           .rainbow{
                width: 300px;
                height: 300px;
                position: relative;
                background-image: url(./dog.jpg);
                background-size: 100% 100%;
            }

接下来使用伪类::after创建彩虹mask：

        .rainbow::after{
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: -webkit-linear-gradient(top, #ff3e18 16.66%,#fc9a00 16.66%, #fc9a00 33.32%, #ffd800 33.32%, #ffd800 49.98%, #39ea7c 49.98%, #39ea7c 66.64%, #0bb2ff 66.64%, #0bb2ff 80.3%, #985aff 80.3% );
            opacity: 0.5;
        }

代码关键的部分在于background中的linear-gradient属性，我们在这里将元素高度从上到下分为6份，并在对应的点设置渐变停顿色，最后将伪类透明度设置为0.5，这样就能生成一张彩虹图了。

css的渐变功能非常强大，远远不止本文中提到的这些。更多酷炫的css渐变例子可以查看这里。

css真的很强大，大家一起来学好它。love wins。