如何用CSS给普通黑色二维码添上彩色渐变

.g-container {
    position: relative;
    width: 200px;
    height: 200px;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(45deg, #673ab7, #ff5722);
        mix-blend-mode: lighten;
    }
}

这里，我们用父元素的伪元素节省一个标签，用作渐变图层，实际的重叠效果，我制作了一个动画：

这样，我们可以通过混合模式，将一张黑色的二维码图片，变成了渐变色。

二维码中间镂空

当然，这还没完，有的时候，我们的二维码中间还会有一些图案，有一张圆形的或者方形的图片。

如果使用上述方法，会有一些瑕疵：

那么，我们还需要根据二维码的样式，将渐变图案中间镂空！

有意思的是，二维码中间的图案，还会有圆形和矩形两种，对于这两种二维码，处理的方式还不太一样。

渐变图案中心镂空一个圆形

对于中心图案是圆形的二维码，我们只需要实现这样一个渐变再叠加即可：

这个还是比较简单的，由于原本是一个线性渐变，中间需要镂空一个圆形，最好的方式是使用 mask：

div {
    background: linear-gradient(45deg, rgb(51, 102, 153), rgb(255, 0, 204));
    mask: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 16%, rgb(0, 0, 0) 16%);
}

渐变图案中心镂空一个矩形

但是，对于中间是一个矩形的话，就不太好办了，我们需要基于渐变图案实现这样一个图形：

方法其实也有很多，譬如我们把中间透明部分想象成一个 div 的 content  部分，而周围渐变颜色区域是边框区域。

当然，这里我使用了 clip-path，使用它，也是可以非常方便的实现镂空的矩形：

div {
    background: linear-gradient(45deg, rgb(51, 102, 153), rgb(255, 0, 204));
    clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 34%, 66% 34%, 66% 66%, 34% 66%, 34% 100%, 100% 100%, 100% 0%);
}

制作一个二维码染色工具

基于上面的知识，我们就可以简单的构建一个渐变彩色二维码工具了。

这里我简单实现了一个：

我们通过上传一个普通二维码，通过自定义渐变颜色，选择是否需要镂空，镂空的类型及大小，快速制作一个渐变彩色二维码。

简单演示一下：

读到这里，这篇“如何用CSS给普通黑色二维码添上彩色渐变”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。