CSS奇思妙想-使用background創造美妙背景（上篇）

文將介紹一些利用 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
不可思議的混合模式 background-blend-mode

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

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

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

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

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

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

嘗試不同的 mix-blend-mode

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

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

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

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

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

借助 CSS-Doodle 隨機生成圖案

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

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

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

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

嘗試使用徑向漸變

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

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

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

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

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

借助 CSS-Doodle 隨機生成圖案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CodePen Demo -- Graideint background mix

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

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

CodePen Demo -- Graideint background mix 2

借助 CSS-Doodle 隨機生成圖案

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

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

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

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

CodePen Demo -- CSS Doodle Mix Gradient

感謝堅持，看到這里。

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

關注我看下半部分，將主要使用 mask

精彩繼續~

程序員web前端教程之CSS3漸變，CSS3漸變（gradient）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用圖像來實現這些效果，現在通過使用 CSS3 的漸變（gradients）即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

1、線性漸變

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

stop：顏色的分布位置，默認均勻分布，例如有3個顏色，各個顏色的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) } /* 瀏覽器默認值 */

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

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

示例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); }

分別產生到“右下角”、“右上角”、“左下角”、“左上角”的漸變

示例3：使用角度漸變

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

2、徑向漸變

徑向漸變不同于線性漸變，線性漸變是從“一個方向”向“另一個方向”的顏色漸變，而徑向漸變是從“一個點”向四周的顏色漸變

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

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

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

farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角

示例1：多顏色點均勻分布

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

以中心（50% 50%）為起點，到最遠角（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：多顏色節點不均勻分布

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

示例3：設置漸變形狀

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

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

circle：漸變為最大的圓形； ellipse：根據元素形狀漸變，元素為正方形是顯示效果與circle無異。

示例4：不同尺寸的漸變

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

closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角

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、重復漸變

（1）重復性線性漸變

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

說明：10%的位置為yellow，20%的位置為green，然后按照這20%向下重復

（2）重復性徑向漸變

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

：測試瀏覽器版本號——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

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

當盒子同時設置圓角（radius）和漸變時，圓角失效，因此不能用這種方式來實現圓角邊框顏色漸變。我們可以使用下面三個方法實現

1 使用背景重疊

在此之前我們先來看看三個跟背景有關的屬性background-origin,background-clip,background-size。

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

border-box 從邊框開始；
padding-box(默認) 從內邊距開始；
content-box 從內容開始。

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

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

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

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

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

contain 將圖像擴大至適應最短的邊，剩余部分默認重復圖像
cover 將圖像擴大至適應最長的邊，圖像可能顯示不完整
length 兩個值依次設置圖像寬和高，未設置則為auto
percentage 兩個百分比依次設置圖像寬和高，未設置則為auto
auto 默認設置

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

以下面代碼為例

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可以多次添加圖片或者漸變，需要用","隔開按照添加順序依次由上往下層疊，簡單來講就是誰先聲明，誰層級高。
background-origin,background-clip,background-size同樣可以設置多個值，用","隔開，每個值對應的是background-image的值。

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

話不多說，上代碼

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

效果如圖

2 使用偽元素

讓我們先來看代碼

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

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

3 使用遮罩

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

具體代碼如下：

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

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

注意

在實驗過程中有以下幾點需要注意：

屬性background-origin,background-clip,background-size針對于background-image生效，如果使用background進行漸變色的設置可能會出現不符預期的效果。
邊框外側有圓角而內部無圓角是因為邊框寬度設置比較大，圓角又設置的比較小。有興趣的可以自己實驗一下

在線咨詢

上一篇：HTML 編輯器
下一篇：HTML基礎教程：框架實例大合集

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS奇思妙想-使用background創造美妙背景（上篇）

您的項目需求