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

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

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

背景基礎知識

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

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

• 純色背景 background: #000：

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

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

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

背景進階

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

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

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

接下來，開始組合之旅。

使用 mix-blend-mode

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

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

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

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

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

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

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

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

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

嘗試不同的 mix-blend-mode

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

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

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

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

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

借助 CSS-Doodle 隨機生成圖案

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

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

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

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，運用上述的規(guī)則在徑向漸變，也可以得到一系列有意思的背景圖。

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

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

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

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

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

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

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

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

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

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

下面，我們也來實現(xiàn)一個。

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

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

CodePen Demo -- Graideint background mix

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

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

CodePen Demo -- Graideint background mix 2

借助 CSS-Doodle 隨機生成圖案

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

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

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

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

CodePen Demo -- CSS Doodle Mix Gradient

感謝堅持，看到這里。

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

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

精彩繼續(xù)~

一篇文章呢，我們寫了相關CSS的基礎語法，包括CSS語法、多重聲明、選擇器的分組及CSS的引入，那么學會了怎么寫CSS，接下來就要想寫那些樣式，包括些什么樣式，由于內容之多，所以分成上下篇，下面呢，我給大家介紹一下。

【引言】

通俗點說，就是給我們的網頁“化妝”，就像你女朋友化妝一樣，給頭發(fā)噴點水，給眼睛畫個眼線，給臉蛋抹點粉，然后穿上漂亮的衣服，網頁元素添加CSS樣式也一樣，大點說，給頁面頭部添加一個樣式，給導航添加一個樣式，給身體添加一個樣式，然后給底部添加一個樣式，就這樣才形成一個漂亮，所謂用戶體驗度良好的頁面，然后加以數(shù)據(jù)請求讓它動起來，都完事了，你才能帶女朋友出門，讓你的網頁上線。

讓我們來看看有哪些CSS樣式。

CSS背景

CSS允許應用純色作為背景，也允許使用背景圖像創(chuàng)建較為復雜的效果。

1、背景色（background-color）

可以為所有元素設置背景色，這包括body一直到<a></a>和<em></em>等行內元素。background-color不能繼承，其默認值是transparent，就是透明背景，相當于沒有指定任何背景色。例如：

<style type="text/css">
			h1 {
 background: red;/*定義字體背景為紅色*/
 padding: 20px;/*向外延伸*/
 }
</style>
		

也可以增加內邊距將背景色從元素中的文本向外延伸內邊距值。

2、背景圖像（background-image）

使用background-image可以為元素設置背景圖像，其默認值為none，表示背景圖像為空，如需設置，還需為這個屬性設置一個URL值，例如：

h1 {
				background-image: url(images/demo.jpg);/*定義背景圖片*/
			}

這樣就為h1元素指定了一個名為“demo”的圖片，你也可以為行內元素設置背景圖像，例如a鏈接元素。但背景圖片的設置有很多樣式，例如下面：

2.1、背景重復（background-repeat）

如果需要設置背景圖像為平鋪，屬性值為repeat，這樣一來就會讓背景圖像在水平垂直方向上都平鋪，方向由repeat-x和repeat-y控制，no-repeat則不會在任何方向上平鋪。默認背景圖像從元素的左上角開始平鋪，例如：

h1 {
				background-image: url(images/demo.jpg);/*定義背景圖片*/
				background-repeat: no-repeat;/*不平鋪*/
				background-repeat: repeat-y;/*在垂直方向平鋪*/
				background-repeat: repeat-;/*在水平方向平鋪*/
			}

2.3、背景定位（background-position）

可以利用background-position屬性改變圖像在背景中的位置。讓背景圖像定位在想定位的地方。

h1 {
				background-image: url("images/pig.jpg");/*定義背景圖片*/
				background-color: cyan;/*定義背景顏色*/
				background-repeat: repeat-y;/*在y軸平鋪*/
				background-position:top center;/*兩個屬性值*/
				background-size: 55px 44px;/*定義背景圖片大小*/
			}

為background-position屬性提供了很多值，例如：

關鍵字：top、bottom、left、right和center，一般情況下這些關鍵字都會成對出現(xiàn)。top left使圖像放置在元素內邊距的右上角，根據(jù)規(guī)范，順序可以顛倒，說白了，就是方向左上、左下、右上、右下、中間，在數(shù)學上，平面內一個點位置由（x，y）兩個坐標確定，CSS中的背景圖像也是。

百分數(shù)值：就是把（x，y）上的值由百分數(shù)來確定。其默認的百分數(shù)值為0% 0%。相當于top left。這就解釋了背景圖像為什么總是從元素的內邊距區(qū)左上角開始平鋪。你設置定了值就根據(jù)你的值來確定位置。

長度值：就是設置具體的值，5px 10px，開發(fā)中這種用的最多。

2.4、背景大小（background-size）

可以利用background-size來調整背景圖片的大小，讓其更好的適應我們的元素。例如：

background-size: length|percentage|cover|contain;

length：設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。

background-size: 10px 20px;

percentage：以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。

background-size: 100% 100%;

cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。

background-size: cover;

contain：把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區(qū)域。

background-size: contain;

2.5、背景關聯(lián)（background-attachment）

有的時候要設置頁面滾動，其背景圖像看起來固定的特效，就是說，頁面滾動，滾動到背景圖像位置的時候圖像出顯示，超過的時候，圖像就會消失。例如：

h1 {
				background-image: url(images/demo.jpg);/*定義字體背景為紅色*/
				background-attachment:fixed
			}

CSS文本

用一些CSS樣式對其文本進行相關的操作。

1、對齊方式（text-align）

這個屬性它會影響元素中的文本行對齊的方式。

1.1、值center、left、right會導致元素中文本居中、左對齊、右對齊，例如，左對齊：text-align：left。

提示：將塊級元素或表元素居中，要通過在這些元素上適當?shù)脑O置左、右外邊距來實現(xiàn)。

text-align:center 與 <CENTER>

這兩個作用大不相同，<center>不僅影響文本，還會把整個元素居中，而text-align:center只影響文本內容。

1.2、justify

就是說兩端對齊，它會自動調整文本間的間隔，使每行長度一樣，文本看起來更整潔。此外還有一個屬性就是：text-align-last: center;把文本的最后一行居中顯示。

2、字間隔（word-spacing）

word-spacing屬性可以改變字（單詞）之間的標準間隔，默認值為0，可以接受一個正值會負值，

h1 {word-spacing: 30px;}
h2 {word-spacing: -0.5em;}

3、字母間隔（letter-spacing）

字母間隔修改的是字符或字母之間的間隔。也可以是正值或負值。

h1 {letter-spacing: -0.5em}
h2 {letter-spacing: 20px}

4、字符轉化（text-transform）

text-transform屬性處理文本的大小寫，有4個值：none、uppercase、lowercase、capitalize，none就是啥也不變，uppercase，lowercase就是將文本轉化為大寫和小寫，capitalize只將首字母轉化為大寫。

h1 {
				text-transform:none;
				text-transform:uppercase;
				text-transform:lowercase;
				text-transform:capitalize;
			}

5、文本裝飾（text-decoration）

這個屬性是來處理文本的，估計沒這個屬性，有些字體只能切圖或者由更多的代碼來完成。有5個值，none、underline、overline、line-through、blink。none就是默認啥也沒有，underline會對文本加下劃線，overline相反，會在文本頂端加上劃線，line-through則會在文本中間加一條線，blink會讓文本閃爍。

h1 {
				text-decoration:none;
				text-decoration:underline;
				text-decoration:overline;
				text-decoration:line-through;
				text-decoration:blink;
			}

6、處理空白符（white-space）

這個屬性會影響源文檔中的空格，換行和tab字符處理，也有5個值，normal、pre、nowrap、pre-wrap、pre-line。注意后兩個在IE7和FireFox2.0瀏覽器中不支持。

6.1、normal

去除文本多余的空白符，包括換行符，多個空格符也會換為一個空格。

6.2、pre

加上這個，空白符的處理就不一樣，不會被忽略。

6.3、nowrap

防止文本換行。

6.4、pre-wrap和pre-line

作用是允許開發(fā)人員更好的控制空白符，設置為pre-wrap，文本保留空白符，也會正常換行，如果設置為pre-line，不會保留空白符，但會保留換行符。

h1 {
				white-space:normal;
				white-space:nowrap;
				white-space:pre;
				white-space:pre-line;
				white-space:pre-wrap;
			}

7、文本方向（direction）

這個屬性影響塊級元素中的文本的方向，表中列布局的方向、內容填充其元素框的方向、以及兩端對齊元素中最后一行的位置。

注意：對于行內元素，只有當unicode-bidi屬性設置為embed或bidioverride時才會應用direction屬性。

direction屬性有兩個值：ltr和rtl。大多數(shù)情況下，默認值是ltr，顯示從左到右的文本，如果顯示從右到左的文本，應使用值rtl。

h1 {direction:rtl;unicode-bidi:bidi-override;}
h2{direction:ltr;unicode-bidi:embed;}

8、縮進文本（ text-indent）

這是一種常見的文本格式化效果，使得所有元素的第一行縮進一個給定的長度，也可以是負值。但無法應用于行內元素。

注意：也可以用左內邊距或外邊距創(chuàng)造這種效果，一般發(fā)表的新聞，文章之類的使用的較多。

p {text-indent: 5em;}
p {text-indent: -5em;}

但是，使用負值的時候要當心，如果設置了負值，那么首行的文本會超出瀏覽器窗口的左邊界。建議配合padding-left使用。

p {text-indent: -5em; padding-left: 5em;}

8.1、適用百分比

百分數(shù)要相對于縮進元素父元素的寬度。換句話說，如果將縮進值設置為 20%，所影響元素的第一行會縮進其父元素寬度的 20%。

例如，縮進值是父元素的20%，即100px。

<style type="text/css">
			div {width: 500px;}
			p {text-indent: 20%;}
</style>
<div>
		<p>這是一個段落</p>
</div>

8.2、繼承

text-indent屬性可以繼承。就是說給父級設置了縮進，子元素也會繼承該屬性，進行縮進。

9、文本陰影（text-shadow）

這個屬性設置文本陰影。所有的主流瀏覽器支持text-shadow，IE9以及更早的不支持。

基本語法為：

text-shadow: h-shadow v-shadow blur color;

text-shadow 屬性向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規(guī)定。省略的長度是 0。

h-shadow：水平陰影的位置。允許負值。

v-shadow：垂直陰影的位置。允許負值。

blue：模糊的距離

color：陰影的顏色

CSS樣式中的背景和文本今天就講到這里了，下一篇講解CSS樣式中的字體、鏈接、列表、表格、輪廓，希望大家不要放棄學習哦！

PS：

本文為‘Web前端進階指南’原創(chuàng)，手動碼字不易，小伙伴們別忘了順手點個贊加個關注哈，有什么不懂得下方留言評論或私信。謝謝大家哈！