本文小編為大家詳細(xì)介紹“如何用CSS給普通黑色二維碼添上彩色漸變”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“如何用CSS給普通黑色二維碼添上彩色漸變”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作與策劃設(shè)計(jì),閔行網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:閔行等地區(qū)。閔行做網(wǎng)站價(jià)格咨詢:13518219792
擁有一張?jiān)瓐D,想改變其顏色。在 CSS 中,我們很快可以想到 濾鏡 filter、或者是 混合模式 mix-blend-mode。
這里,我們就需要用到 混合模式 mix-blend-mode?;旌夏J阶畛R娪?photoshop 中,是 PS 中十分強(qiáng)大的功能之一。目前 CSS 已經(jīng)原生支持了大部分的混合模式。
原理其實(shí)非常簡(jiǎn)單,我們實(shí)現(xiàn)一張漸變圖形,這張圖形通過混合模式中的 mix-blend-mode: lighten
與白底黑字的二維碼重疊在一起后,二維碼中的白色區(qū)域?qū)⒈3植蛔?,而二維碼中的黑色區(qū)域?qū)⒄宫F(xiàn)為漸變圖案中的顏色。
聽起來有點(diǎn)繞,通過一個(gè)示意圖,一看就懂,我們只需要兩層,原二維碼為一層,然后將漸變圖案疊加在其之上,并且設(shè)置 mix-blend-mode: lighten
即可:
<div class="g-container"> <img src="qrcode.png"> </div>
.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)畫:
這樣,我們可以通過混合模式,將一張黑色的二維碼圖片,變成了漸變色。
當(dāng)然,這還沒完,有的時(shí)候,我們的二維碼中間還會(huì)有一些圖案,有一張圓形的或者方形的圖片。
如果使用上述方法,會(huì)有一些瑕疵:
那么,我們還需要根據(jù)二維碼的樣式,將漸變圖案中間鏤空!
有意思的是,二維碼中間的圖案,還會(huì)有圓形和矩形兩種,對(duì)于這兩種二維碼,處理的方式還不太一樣。
對(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%); }
但是,對(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%); }
基于上面的知識(shí),我們就可以簡(jiǎn)單的構(gòu)建一個(gè)漸變彩色二維碼工具了。
這里我簡(jiǎn)單實(shí)現(xiàn)了一個(gè):
我們通過上傳一個(gè)普通二維碼,通過自定義漸變顏色,選擇是否需要鏤空,鏤空的類型及大小,快速制作一個(gè)漸變彩色二維碼。
簡(jiǎn)單演示一下:
讀到這里,這篇“如何用CSS給普通黑色二維碼添上彩色漸變”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享標(biāo)題:如何用CSS給普通黑色二維碼添上彩色漸變
當(dāng)前網(wǎng)址:http://muchs.cn/article36/pidopg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、面包屑導(dǎo)航、品牌網(wǎng)站制作、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)