如何用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;
    }
}

這里，我們用父元素的偽元素節(jié)省一個(gè)標(biāo)簽，用作漸變圖層，實(shí)際的重疊效果，我制作了一個(gè)動(dòng)畫：

這樣，我們可以通過(guò)混合模式，將一張黑色的二維碼圖片，變成了漸變色。

二維碼中間鏤空

當(dāng)然，這還沒完，有的時(shí)候，我們的二維碼中間還會(huì)有一些圖案，有一張圓形的或者方形的圖片。

如果使用上述方法，會(huì)有一些瑕疵：

那么，我們還需要根據(jù)二維碼的樣式，將漸變圖案中間鏤空！

有意思的是，二維碼中間的圖案，還會(huì)有圓形和矩形兩種，對(duì)于這兩種二維碼，處理的方式還不太一樣。

漸變圖案中心鏤空一個(gè)圓形

對(duì)于中心圖案是圓形的二維碼，我們只需要實(shí)現(xiàn)這樣一個(gè)漸變?cè)侬B加即可：

這個(gè)還是比較簡(jiǎn)單的，由于原本是一個(gè)線性漸變，中間需要鏤空一個(gè)圓形，最好的方式是使用 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%);
}

漸變圖案中心鏤空一個(gè)矩形

但是，對(duì)于中間是一個(gè)矩形的話，就不太好辦了，我們需要基于漸變圖案實(shí)現(xiàn)這樣一個(gè)圖形：

方法其實(shí)也有很多，譬如我們把中間透明部分想象成一個(gè) div 的 content  部分，而周圍漸變顏色區(qū)域是邊框區(qū)域。

當(dāng)然，這里我使用了 clip-path，使用它，也是可以非常方便的實(shí)現(xiàn)鏤空的矩形：

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%);
}

制作一個(gè)二維碼染色工具

基于上面的知識(shí)，我們就可以簡(jiǎn)單的構(gòu)建一個(gè)漸變彩色二維碼工具了。

這里我簡(jiǎn)單實(shí)現(xiàn)了一個(gè)：

我們通過(guò)上傳一個(gè)普通二維碼，通過(guò)自定義漸變顏色，選擇是否需要鏤空，鏤空的類型及大小，快速制作一個(gè)漸變彩色二維碼。

簡(jiǎn)單演示一下：

讀到這里，這篇“如何用CSS給普通黑色二維碼添上彩色漸變”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。