CSS奇思妙想-使用background創(chuàng)造美妙背景（上篇）

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

通過(guò)本文，你將會(huì)了解到 CSS background 中更為強(qiáng)大的一些用法，并且學(xué)會(huì)利用 background 相關(guān)的一些屬性，采用不同的方式，去創(chuàng)造更復(fù)雜的背景圖案。在這個(gè)過(guò)程中，你會(huì)更好的掌握不同的漸變技巧，更深層次的理解各種不同的漸變。

同時(shí)，借助強(qiáng)大的 CSS-Doodle，你將學(xué)會(huì)如何運(yùn)用一套規(guī)則，快速創(chuàng)建大量不同的隨機(jī)圖案，感受 CSS 的強(qiáng)大，走進(jìn) CSS 的美。

背景基礎(chǔ)知識(shí)

我們都知道，CSS 中的 background 是非常強(qiáng)大的。

首先，復(fù)習(xí)一下基礎(chǔ)，在日常中，我們使用最多的應(yīng)該就是下面 4 種：

純色背景 background: #000：

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

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

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

背景進(jìn)階

當(dāng)然。掌握了基本的漸變之后，我們開(kāi)始向更復(fù)雜的背景圖案進(jìn)發(fā)。我最早是在《CSS Secret》一書(shū)中接觸學(xué)習(xí)到使用漸變?nèi)?shí)現(xiàn)各種背景圖案的。然后就是不斷的摸索嘗試，總結(jié)出了一些經(jīng)驗(yàn)。

在嘗試使用漸變?nèi)ブ谱鞲鼜?fù)雜的背景之前，列出一些比較重要的技巧點(diǎn)：

漸變不僅僅只能是單個(gè)的 linear-gradient 或者單個(gè)的 radial-gradient，對(duì)于 background 而言，它是支持多重漸變的疊加的，一點(diǎn)非常重要；
靈活使用 repeating-linear-gradeint（repeating-radial-gradeint），它能減少很多代碼量
transparent 透明無(wú)處不在
嘗試 mix-blend-mode 與 mask，創(chuàng)建復(fù)雜圖案的靈魂
使用隨機(jī)變量，它能讓一個(gè) idea 變成無(wú)數(shù)美麗的圖案

接下來(lái)，開(kāi)始組合之旅。

使用 mix-blend-mode

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

關(guān)于混合模式的一些基礎(chǔ)用法，你可以參考我的這幾篇文章：

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

然后，我們來(lái)嘗試第一個(gè)圖案，先簡(jiǎn)單體會(huì)一下 mix-blend-mode 的作用。

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

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

好，在這個(gè)基礎(chǔ)上，我們給最上層的圖案，添加 mix-blend-mode: multiply，再來(lái)一次，看看這次會(huì)發(fā)生什么。

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

CodePen Demo - Repeating-linear-gradient background & mix-blend-mode

嘗試不同的 mix-blend-mode

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

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

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

可以看到，不同的混合模式的疊加，效果相差非常之大。當(dāng)然，運(yùn)用不同的混合模式，我們也就可以創(chuàng)造出效果各異的圖案。

CodePen Demo - Repeating-linear-gradient background & mix-blend-mode

借助 CSS-Doodle 隨機(jī)生成圖案

到這，就不得不引出一個(gè)寫(xiě) CSS 的神器 -- CSS-Doodle，我在其他非常多文章中也多次提到過(guò) CSS-doodle，簡(jiǎn)單而言，它是一個(gè)基于 Web-Component 的庫(kù)。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁(yè)面，并且提供各種便捷的指令及函數(shù)（隨機(jī)、循環(huán)等等），讓我們能通過(guò)一套規(guī)則，得到不同 CSS 效果。

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

可以點(diǎn)進(jìn)去嘗試一下，點(diǎn)擊鼠標(biāo)即可隨機(jī)生成不同的效果：

CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background

嘗試使用徑向漸變

當(dāng)然，上面使用的是線(xiàn)性漸變，同樣，我們也可以使用徑向漸變運(yùn)用同樣的套路。

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

給圖片應(yīng)用上 background-size，它就會(huì)像是這樣：

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

CodePen Demo -- radial-gradient & mix-blend-mode Demo

借助 CSS-Doodle 隨機(jī)生成圖案

再來(lái)一次，我們使用 CSS-Doodle，運(yùn)用上述的規(guī)則在徑向漸變，也可以得到一系列有意思的背景圖。

可以點(diǎn)進(jìn)去嘗試一下，點(diǎn)擊鼠標(biāo)即可隨機(jī)生成不同的效果：

CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2

當(dāng)然，上述的疊加都是非常簡(jiǎn)單的圖案的疊加，但是掌握了這個(gè)原理之后，就可以自己嘗試，去創(chuàng)造更復(fù)雜的融合。:dog:

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

在不同的漸變背景中運(yùn)用混合模式

在不同的漸變背景中運(yùn)用混合模式？那會(huì)產(chǎn)生什么樣美妙的效果呢？

運(yùn)用得當(dāng)，它可能會(huì)像是這樣：

umm，與上面的條紋圖案完全不一樣的風(fēng)格。

你可以戳進(jìn) gradienta.io 來(lái)看看，這里全是使用 CSS 創(chuàng)建的漸變疊加的背景圖案庫(kù)。

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

下面，我們也來(lái)實(shí)現(xiàn)一個(gè)。

首先，我們使用線(xiàn)性漸變或者徑向漸變，隨意創(chuàng)建幾個(gè)漸變圖案，如下所示：

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

CodePen Demo -- Graideint background mix

由于上面動(dòng)圖 GIF 的壓縮率非常高，所以看上去鋸齒很明顯圖像很模糊，你可以點(diǎn)進(jìn)上面的鏈接看看。

然后，我們可以再給疊加后的圖像再加上一個(gè) filter: hue-rotate()，讓他動(dòng)起來(lái)，放大一點(diǎn)點(diǎn)看看效果，絢麗奪目的光影效果：

CodePen Demo -- Graideint background mix 2

借助 CSS-Doodle 隨機(jī)生成圖案

噔噔噔，沒(méi)錯(cuò)，這里我們又可以繼續(xù)把 CSS-Doodle 搬出來(lái)了。

隨機(jī)的漸變，隨機(jī)的混合模式，疊加在一起，燥起來(lái)吧。

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

當(dāng)然，由于是完全隨機(jī)生成的效果，所以部分時(shí)候生成出來(lái)的不算太好看或者直接是純色的。不過(guò)大部分還是挺不錯(cuò)的 :joy:

CodePen Demo -- CSS Doodle Mix Gradient

感謝堅(jiān)持，看到這里。

上述上半部分主要使用的混合模式。

關(guān)注我看下半部分，將主要使用 mask

精彩繼續(xù)~

程序員web前端教程之CSS3漸變，CSS3漸變（gradient）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。以前，你必須使用圖像來(lái)實(shí)現(xiàn)這些效果，現(xiàn)在通過(guò)使用 CSS3 的漸變（gradients）即可實(shí)現(xiàn)。此外，漸變效果的元素在放大時(shí)看起來(lái)效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。

1、線(xiàn)性漸變

語(yǔ)法：background: linear-gradient(direction, color-stop1, color-stop2, ...);說(shuō)明：direction：默認(rèn)為to bottom，即從上向下的漸變；

stop：顏色的分布位置，默認(rèn)均勻分布，例如有3個(gè)顏色，各個(gè)顏色的stop均為33.33%。

示例1：to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) }

div { background:linear-gradient(to right, red , blue) }

div { background:linear-gradient(to bottom, red , blue) } /* 瀏覽器默認(rèn)值 */

div { background:linear-gradient(to top, red , blue) }

分別產(chǎn)生“從右到左”、“從左到右”、“從上到下”、“從下到上”的“紅色–綠色”漸變

示例2：to right bottom、to right top、to left bottom、to left top

div { background: linear-gradient(to right bottom, red , blue); }

div { background: linear-gradient(to right top, red , blue); }

div { background: linear-gradient(to left bottom, red , blue); }

div { background: linear-gradient(to left top, red , blue); }

分別產(chǎn)生到“右下角”、“右上角”、“左下角”、“左上角”的漸變

示例3：使用角度漸變

div { background: linear-gradient(10deg, red, blue) }

2、徑向漸變

徑向漸變不同于線(xiàn)性漸變，線(xiàn)性漸變是從“一個(gè)方向”向“另一個(gè)方向”的顏色漸變，而徑向漸變是從“一個(gè)點(diǎn)”向四周的顏色漸變

語(yǔ)法：background: radial-gradient(center, shape, size, start-color, ..., last-color);說(shuō)明：center：漸變起點(diǎn)的位置，可以為百分比，默認(rèn)是圖形的正中心。

shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認(rèn)為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。

size：漸變的大小，即漸變到哪里停止，它有四個(gè)值。 closest-side：最近邊；

farthest-side：最遠(yuǎn)邊； closest-corner：最近角； farthest-corner：最遠(yuǎn)角

示例1：多顏色點(diǎn)均勻分布

div { background: radial-gradient(red, green, blue); }

以中心（50% 50%）為起點(diǎn)，到最遠(yuǎn)角（farthest-corner），從red到green、blue的均勻漸變

EG:div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 或 div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

示例2：多顏色節(jié)點(diǎn)不均勻分布

div { background: radial-gradient(red 5%, green 15%, blue 60%); }

示例3：設(shè)置漸變形狀

div { background: radial-gradient(circle, red, yellow, green); }

div { background: radial-gradient(ellipse, red, yellow, green); }

circle：漸變?yōu)樽畲蟮膱A形； ellipse：根據(jù)元素形狀漸變，元素為正方形是顯示效果與circle無(wú)異。

示例4：不同尺寸的漸變

size指定了漸變的大小，即漸變到哪里停止，它有四個(gè)值。

closest-side：最近邊； farthest-side：最遠(yuǎn)邊； closest-corner：最近角； farthest-corner：最遠(yuǎn)角

div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }

div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }

3、重復(fù)漸變

（1）重復(fù)性線(xiàn)性漸變

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

說(shuō)明：10%的位置為yellow，20%的位置為green，然后按照這20%向下重復(fù)

（2）重復(fù)性徑向漸變

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

：測(cè)試瀏覽器版本號(hào)——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

之前《CSS之漸變效果的實(shí)現(xiàn)》中有講到邊框顏色漸變，但是只有講最普通的邊框漸變，其作用于圓角邊框漸變時(shí)會(huì)覆蓋掉圓角的效果，這不是我們預(yù)期的，所以我們需要尋找其他的方法解決這個(gè)需求。

當(dāng)盒子同時(shí)設(shè)置圓角（radius）和漸變時(shí)，圓角失效，因此不能用這種方式來(lái)實(shí)現(xiàn)圓角邊框顏色漸變。我們可以使用下面三個(gè)方法實(shí)現(xiàn)

1 使用背景重疊

在此之前我們先來(lái)看看三個(gè)跟背景有關(guān)的屬性background-origin,background-clip,background-size。

background-origin表示的是背景起始位置，其三個(gè)值如下，依次是

border-box 從邊框開(kāi)始；
padding-box(默認(rèn)) 從內(nèi)邊距開(kāi)始；
content-box 從內(nèi)容開(kāi)始。

background-origin: border-box | padding-box(默認(rèn)) | content-box

background-clip表示的是背景填充位置，其四個(gè)值如下，依次是

border-box(默認(rèn)) 填充至邊框；
padding-box 填充至內(nèi)邊距；
content-box 填充之內(nèi)容；
text 作為字體前景色。

background-clip: border-box(默認(rèn)) | padding-box | content-box | text

background-size表示的是背景尺寸，其五個(gè)值如下，依次是

contain 將圖像擴(kuò)大至適應(yīng)最短的邊，剩余部分默認(rèn)重復(fù)圖像
cover 將圖像擴(kuò)大至適應(yīng)最長(zhǎng)的邊，圖像可能顯示不完整
length 兩個(gè)值依次設(shè)置圖像寬和高，未設(shè)置則為auto
percentage 兩個(gè)百分比依次設(shè)置圖像寬和高，未設(shè)置則為auto
auto 默認(rèn)設(shè)置

background-size: contain | cover | <length> | <percentage> | auto(默認(rèn))

以下面代碼為例

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border:50px solid transparent;
 background-origin:border-box;
 background-clip: content-box,padding-box, border-box;
 background-size: contain,50px 50px,cover;
 background-image:url("css.jpg"),linear-gradient(yellow, green),url("css.jpg");
}

效果如圖

由上面的例子我們可以看出：

background-image可以多次添加圖片或者漸變，需要用","隔開(kāi)按照添加順序依次由上往下層疊，簡(jiǎn)單來(lái)講就是誰(shuí)先聲明，誰(shuí)層級(jí)高。
background-origin,background-clip,background-size同樣可以設(shè)置多個(gè)值，用","隔開(kāi)，每個(gè)值對(duì)應(yīng)的是background-image的值。

有了上述的知識(shí)，我們現(xiàn)在可以實(shí)現(xiàn)我們的需求了，其主要原理是利用背景重疊，第一個(gè)背景設(shè)置范圍為padding和content，第二個(gè)背景設(shè)置范圍為border，padding和content，那么第二個(gè)背景只有border顯示，其中padding和content被第一個(gè)背景覆蓋。

話(huà)不多說(shuō)，上代碼

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設(shè)置圓角*/
 border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開(kāi)始背景圖*/
 background-clip: padding-box, border-box; /*設(shè)置第一個(gè)背景和第二個(gè)背景的范圍*/
 background-size: cover;
 /*由于背景圖像不能設(shè)置純色，所以可以使用下面的方式設(shè)置純色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(yellow, green); 
}

效果如圖

2 使用偽元素

讓我們先來(lái)看代碼

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*設(shè)置圓角*/
 border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/
 background-clip: padding-box; /*確保此北京范圍為內(nèi)邊距內(nèi)*/
 background: #fff;
}
div::after {
 position: absolute;
 /*以div的content為基準(zhǔn)往外擴(kuò)border的寬度*/
 top: -50px; 
 bottom: -50px; 
 left: -50px;
 right: -50px;
 border-radius: 50px;
 /*設(shè)置偽元素背景漸變色*/
 background-image: linear-gradient(yellow, green);
 content: '';
 /*利用層疊將div部分背景置頂*/
 z-index: -1; 
}

效果如下圖，與方法1中效果相同

3 使用遮罩

使用遮罩，顧名思義就是在div外面加一層div，其大小正好比里面的div大border的寬度，通過(guò)外面div的背景漸變來(lái)模擬圓角邊框漸變。

具體代碼如下：

/*內(nèi)部div樣式*/
.inside {
 width: 960px;
 height: 360px;
 margin: 10px;
 padding: 0px;
 border-radius: 50px; /*設(shè)置圓角*/
 border:50px solid transparent; /*設(shè)置邊框顏色透明，確保背景漸變色顯示*/
 background-origin:border-box; /*從邊框開(kāi)始背景圖*/
 background-image: linear-gradient(yellow, green);
}
/*外部div樣式*/
.outside {
 background: #fff;
 width: calc(100% - 60px);
 height: calc(100% - 60px);
 padding: 30px;
}

效果如下圖，與方法1中效果相同

注意

在實(shí)驗(yàn)過(guò)程中有以下幾點(diǎn)需要注意：

屬性background-origin,background-clip,background-size針對(duì)于background-image生效，如果使用background進(jìn)行漸變色的設(shè)置可能會(huì)出現(xiàn)不符預(yù)期的效果。
邊框外側(cè)有圓角而內(nèi)部無(wú)圓角是因?yàn)檫吙驅(qū)挾仍O(shè)置比較大，圓角又設(shè)置的比較小。有興趣的可以自己實(shí)驗(yàn)一下

在線(xiàn)咨詢(xún)

上一篇：HTML 編輯器
下一篇：HTML基礎(chǔ)教程：框架實(shí)例大合集

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS奇思妙想-使用background創(chuàng)造美妙背景（上篇）

您的項(xiàng)目需求