究極花里胡哨的漸變是什么樣子的？

作者：SbCoco 2021-11-29 07:42:44

本文屬于 CSS 繪圖技巧其中一篇，介紹一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相關屬性，制作一些稍微復雜、酷炫的背景。

本文屬于 CSS 繪圖技巧其中一篇，系列文章：

在 CSS 中使用三角函數繪制曲線圖形及展示動畫[1]
CSS奇思妙想 -- 使用 CSS 創造藝術[2]

將介紹一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相關屬性，制作一些稍微復雜、酷炫的背景。

通過本文，你將會了解到 CSS background 中更為強大的一些用法，并且學會利用 background 相關的一些屬性，采用不同的方式，去創造更復雜的背景圖案。在這個過程中，你會更好的掌握不同的漸變技巧，更深層次的理解各種不同的漸變。

同時，借助強大的 CSS-Doodle，你將學會如何運用一套規則，快速創建大量不同的隨機圖案，感受 CSS 的強大，走進 CSS 的美。

背景基礎知識

我們都知道，CSS 中的 background 是非常強大的。

首先，復習一下基礎，在日常中，我們使用最多的應該就是下面 4 種：

純色背景 background: #000：

線性漸變 background: linear-gradient(#fff, #000) :

徑向漸變 background: radial-gradient(#fff, #000) :

角向漸變 background: conic-gradient(#fff, #000) :

背景進階

當然。掌握了基本的漸變之后，我們開始向更復雜的背景圖案進發。我最早是在《CSS Secret》一書中接觸學習到使用漸變去實現各種背景圖案的。然后就是不斷的摸索嘗試，總結出了一些經驗。

在嘗試使用漸變去制作更復雜的背景之前，列出一些比較重要的技巧點：

漸變不僅僅只能是單個的 linear-gradient 或者單個的 radial-gradient，對于 background 而言，它是支持多重漸變的疊加的，一點非常重要;
靈活使用 repeating-linear-gradeint(repeating-radial-gradeint)，它能減少很多代碼量
transparent 透明無處不在
嘗試 mix-blend-mode 與 mask，創建復雜圖案的靈魂
使用隨機變量，它能讓一個 idea 變成無數美麗的圖案

接下來，開始組合之旅。

使用 mix-blend-mode

mix-blend-mode ，混合模式。最常見于 photoshop 中，是 PS 中十分強大的功能之一。在 CSS 中，我們可以利用混合模式將多個圖層混合得到一個新的效果。

關于混合模式的一些基礎用法，你可以參考我的這幾篇文章：

不可思議的顏色混合模式 mix-blend-mode [3]
不可思議的混合模式 background-blend-mode[4]

然后，我們來嘗試第一個圖案，先簡單體會一下 mix-blend-mode 的作用。

我們使用 repeating-linear-gradient 重復線性漸變，制作兩個角度相反的背景條紋圖。正常而言，不使用混合模式，將兩個圖案疊加在一起，看看會發生什么。

額，會發生什么就有鬼了:sweat_smile: 。顯而易見，由于圖案不是透明的，疊加在一起之后，由于層疊的關系，只能看到其中一張圖。

好，在這個基礎上，我們給最上層的圖案，添加 mix-blend-mode: multiply，再來一次，看看這次會發生什么。

可以看到，添加了混合模式之后，兩張背景圖通過某種算法疊加在了一起，展現出了非常漂亮的圖案效果，也正是我們想要的效果。

CodePen Demo - Repeating-linear-gradient background & mix-blend-mode[5]

嘗試不同的 mix-blend-mode

那為什么上面使用的是 mix-blend-mode: multiply 呢?用其他混合模式可以不可以?

當然可以。這里僅僅只是一個示例，mix-blend-mode: multiply 在 PS 中意為正片疊底，屬于圖層混合模式的變暗模式組之一。

我們使用上面的 DEMO，嘗試其他的混合模式，可以得到不同的效果。

可以看到，不同的混合模式的疊加，效果相差非常之大。當然，運用不同的混合模式，我們也就可以創造出效果各異的圖案。

CodePen Demo - Repeating-linear-gradient background & mix-blend-mode[6]

借助 CSS-Doodle 隨機生成圖案

到這，就不得不引出一個寫 CSS 的神器 -- CSS-Doodle[7]，我在其他非常多文章中也多次提到過 CSS-doodle，簡單而言，它是一個基于 Web-Component 的庫。允許我們快速的創建基于 CSS Grid 布局的頁面，并且提供各種便捷的指令及函數(隨機、循環等等)，讓我們能通過一套規則，得到不同 CSS 效果。

還是以上面的 DEMO 作為示例，我們將 repeating-linear-gradient 生成的重復條紋背景的顏色、粗細、角度隨機化、采用的混合模式也是隨機選取，然后利用 CSS-Doodle，快速隨機的創建各種基于此規則的圖案：

可以點進去嘗試一下，點擊鼠標即可隨機生成不同的效果：

CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background [8]

嘗試使用徑向漸變

當然，上面使用的是線性漸變，同樣，我們也可以使用徑向漸變運用同樣的套路。

我們可以使用徑向漸變，生成多重的徑向漸變。像是這樣：

給圖片應用上 background-size，它就會像是這樣：

像上文一樣，我們稍微對這個圖形變形一下，然后疊加兩個圖層，給最上層的圖形，添加 CSS 樣式 mix-blend-mode: darken：

CodePen Demo -- radial-gradient & mix-blend-mode Demo[9]

借助 CSS-Doodle 隨機生成圖案

再來一次，我們使用 CSS-Doodle，運用上述的規則在徑向漸變，也可以得到一系列有意思的背景圖。

可以點進去嘗試一下，點擊鼠標即可隨機生成不同的效果：

CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2 [10]

當然，上述的疊加都是非常簡單的圖案的疊加，但是掌握了這個原理之后，就可以自己嘗試，去創造更復雜的融合。:dog:

上述的疊加效果是基于大片大片的實色的疊加，當然 mix-blend-mode 還能和真正的漸變碰撞出更多的火花。

在不同的漸變背景中運用混合模式

在不同的漸變背景中運用混合模式?那會產生什么樣美妙的效果呢?

運用得當，它可能會像是這樣：

umm，與上面的條紋圖案完全不一樣的風格。

你可以戳進 gradienta.io[11] 來看看，這里全是使用 CSS 創建的漸變疊加的背景圖案庫。

使用混合模式疊加不同的漸變圖案

下面，我們也來實現一個。

首先，我們使用線性漸變或者徑向漸變，隨意創建幾個漸變圖案，如下所示：

接著，我們兩兩之間，從第二層開始，使用一個混合模式進行疊加，一共需要設定 5 個混合模式，這里我使用了 overlay, multiply, difference, difference, overlay。看看疊加之后的效果，非常的 Nice：

CodePen Demo -- Graideint background mix[12]

由于上面動圖 GIF 的壓縮率非常高，所以看上去鋸齒很明顯圖像很模糊，你可以點進上面的鏈接看看。

然后，我們可以再給疊加后的圖像再加上一個 filter: hue-rotate()，讓他動起來，放大一點點看看效果，絢麗奪目的光影效果：

CodePen Demo -- Graideint background mix 2[13]

借助 CSS-Doodle 隨機生成圖案

噔噔噔，沒錯，這里我們又可以繼續把 CSS-Doodle 搬出來了。

隨機的漸變，隨機的混合模式，疊加在一起，燥起來吧。

使用 CSS-Doodle 隨機創建不同的漸變，在隨機使用不同的混合模式，讓他們疊加在一起，看看效果：

當然，由于是完全隨機生成的效果，所以部分時候生成出來的不算太好看或者直接是純色的。不過大部分還是挺不錯的 :joy:

CodePen Demo -- CSS Doodle Mix Gradient[14]

感謝堅持，看到這里。上述上半部分主要使用的混合模式，接下來，下半部分，將主要使用 mask，精彩繼續。

使用 mask

除去混合模式，與背景相關的，還有一個非常有意思的屬性 -- MASK。

mask[15] 譯為遮罩。在 CSS 中，mask 屬性允許使用者通過遮罩或者裁切特定區域的圖片的方式來隱藏一個元素的部分或者全部可見區域。

對 mask 的一些基礎用法還不太熟悉的，可以先看看我的這篇文章 -- 奇妙的 CSS MASK[16]。

簡單而言，mask 可以讓圖片我們可以靈活的控制圖片，設定一部分展示出來，另外剩余部分的隱藏。

使用 mask 對圖案進行切割

舉個例子。假設我們使用 repeating-linear-gradient 漸變制作這樣一個漸變圖案：

它的 CSS 代碼大概是這樣：

:root { 
    $colorMain: #673ab7; 
} 
{ 
    background:  
        repeating-linear-gradient(0, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px), 
        repeating-linear-gradient(60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px), 
        repeating-linear-gradient(-60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px); 
}

如果我們給這個圖案，疊加一個這樣的 mask ：

{ 
    mask: conic-gradient(from -135deg, transparent 50%, #000); 
}

上述 mask 如果是使用 background 表示的話，是這樣 background: conic-gradient(from -135deg, transparent 50%, #000), 圖案是這樣：

兩者疊加在一起，按照 mask 的作用，背景與 mask 生成的漸變的 transparent 的重疊部分，將會變得透明。將會得到這樣一種效果：

CodePen Demo -- mask & background Demo [17]

我們就完成了 background 與 mask 的結合。運用 mask 切割 background 的效果，我們就能制作出非常多有意思的背景圖案：

CodePen Demo -- mask & background Demo [18]

mask-composite OR -webkit-mask-composite

接下來，在運用 mask 切割圖片的同時，我們會再運用到 -webkit-mask-composite 屬性。這個是非常有意思的元素，非常類似于 mix-blend-mode / background-blend-mode。

-webkit-mask-composite[19]: 屬性指定了將應用于同一元素的多個蒙版圖像相互合成的方式。

通俗點來說，他的作用就是，當一個元素存在多重 mask 時，我們就可以運用 -webkit-mask-composite 進行效果疊加。

注意，這里的一個前提，就是當 mask 是多重 mask 的時候(類似于 background，mask 也是可以存著多重 mask)，-webkit-mask-composite 才會生效。這也就元素的 mask 可以指定多個，逗號分隔。

假設我們有這樣一張背景圖：

:root { 
    $colorMain: #673ab7; 
    $colorSub: #00bcd4; 
} 
div { 
    background: linear-gradient(-60deg, $colorMain, $colorSub); 
}

我們的 mask 如下：

{ 
    mask:  
            repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px), 
            repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, transparent 45px), 
            repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 45px); 
}

mask 表述成 background 的話大概是這樣：

如果，不添加任何 -webkit-mask-composite，疊加融合之后的效果是這樣：

如果添加一個 -webkit-mask-composite: xor，則會變成這樣：

可以看到，線條的交匯疊加處，有了不一樣的效果。

CodePen Demo -- background & -webkit-mask-composite[20]

借助 CSS-Doodle 隨機生成圖案

了解了基本原理之后，上 CSS-Doodle，我們利用多重 mask 和 -webkit-mask-composite，便可以創造出各式各樣的美妙背景圖案：

是不是很類似萬花筒?

借助了 CSS-Doodle，我們只設定大致的規則，輔以隨機的參數，隨機的大小。接著就是一幅幅美妙的背景圖應運而生。

下面是運用上述規則的嘗試的一些圖案：

CodePen Demo -- CSS Doodle - CSS MASK Background[21]

當然，可以嘗試變換外形，譬如讓它長得像個手機殼。

下面兩個 DEMO 也是綜合運用了上述的一些技巧的示例，仿佛一個個手機殼的圖案。

CodePen Demo -- CSS Doodle - CSS MASK Background 2[22]

CodePen Demo -- CSS Doodle - CSS MASK Background 3[23]

總結一下

背景 background 不僅僅只是純色、線性漸變、徑向漸變、角向漸變。混合模式、濾鏡、遮罩也并不孤獨。

當 background 配合混合模式 mix-blend-mode，background-blend-mode、濾鏡 filter、以及遮罩 mask 的時候，它們就可以組合變幻出各種不同的效果。

到目前為止，CSS 已經越來越強大，它不僅僅可以用于寫業務，也可以創造很多有美感的事物，只要我們愿意去多加嘗試，便可以創造出美妙的圖案。

最后

好了，本文到此結束，看到這里，你是不是也躍躍欲試?想自己親手嘗試一下?

更多精彩 CSS 技術文章匯總在我的 Github -- iCSS[24] ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

參考資料

[1]在 CSS 中使用三角函數繪制曲線圖形及展示動畫:

https://github.com/chokcoco/iCSS/issues/72

[2]CSS奇思妙想 -- 使用 CSS 創造藝術:

https://github.com/chokcoco/iCSS/issues/94

[3]不可思議的顏色混合模式 mix-blend-mode :

https://github.com/chokcoco/iCSS/issues/16

[4]不可思議的混合模式 background-blend-mode:

https://github.com/chokcoco/iCSS/issues/31

[5]CodePen Demo - Repeating-linear-gradient background & mix-blend-mode:

https://codepen.io/Chokcoco/pen/QWKwKbq

[6]CodePen Demo - Repeating-linear-gradient background & mix-blend-mode:

https://codepen.io/Chokcoco/pen/oNzNZyz

[7]CSS-Doodle:

https://css-doodle.com/

[8]CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background :

https://codepen.io/Chokcoco/pen/qBaBrqE

[9]CodePen Demo -- radial-gradient & mix-blend-mode Demo:

https://codepen.io/Chokcoco/pen/PoGwzgN

[10]CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2 :

https://codepen.io/Chokcoco/pen/mdrdxpd

[11]gradienta.io:

https://gradienta.io/

[12]CodePen Demo -- Graideint background mix:

https://codepen.io/Chokcoco/pen/GRjgQMd

[13]CodePen Demo -- Graideint background mix 2:

https://codepen.io/Chokcoco/pen/BaLyYPv

[14]CodePen Demo -- CSS Doodle Mix Gradient:

https://codepen.io/Chokcoco/pen/abdaGWL

[15]mask:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask

[16]奇妙的 CSS MASK:

https://github.com/chokcoco/iCSS/issues/80

[17]CodePen Demo -- mask & background Demo :

https://codepen.io/Chokcoco/pen/ExgaROZ

[18]CodePen Demo -- mask & background Demo :

https://codepen.io/Chokcoco/pen/RwRzVeP

[19]-webkit-mask-composite:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite

[20]CodePen Demo -- background & -webkit-mask-composite:

https://codepen.io/Chokcoco/pen/rNMaKgW?editors=1100

[21]CodePen Demo -- CSS Doodle - CSS MASK Background:

https://codepen.io/Chokcoco/pen/eYzwXRx

[22]CodePen Demo -- CSS Doodle - CSS MASK Background 2:

https://codepen.io/Chokcoco/pen/pobMgbX

[23]CodePen Demo -- CSS Doodle - CSS MASK Background 3:

https://codepen.io/Chokcoco/pen/WNGeaXb

[24]Github -- iCSS:

https://github.com/chokcoco/iCSS

責任編輯：姜華來源： iCSS前端趣聞

CSS 技巧 CSS 繪圖技巧