家好，今天要跟大家分享的是如何通過(guò)純CSS代碼的方法來(lái)實(shí)現(xiàn)各種條紋背景（如下圖所示）。

通常情況下很多人在網(wǎng)頁(yè)中需要條紋背景時(shí)，都會(huì)使用一些制圖軟件通過(guò)制作位圖的方式在網(wǎng)頁(yè)中引用，但是日后我們需要修改網(wǎng)頁(yè)時(shí)就比較麻煩，還要在重復(fù)一遍起初的制圖過(guò)程重新制作符合需要的位圖，那么如果我們通過(guò)純CSS代碼的方法來(lái)實(shí)現(xiàn)的話，后期網(wǎng)站維護(hù)起來(lái)就會(huì)輕松很多。

知識(shí)點(diǎn)：線性漸變linear-gradient()

水平條紋

首先我們看一個(gè)最簡(jiǎn)單的水平漸變

div{
 width:1000px;
 height:600px;
 background:linear-gradient(#fb3,#58b);
}

在這段代碼中其實(shí)存在兩個(gè)省略掉的默認(rèn)樣式：一個(gè)是漸變的方向（默認(rèn)：to bottom)，另一個(gè)是顏色漸變起止的位置（默認(rèn)：黃色從0%的位置向下，藍(lán)色從100%的位置向上，在中間50%的地方漸變同時(shí)結(jié)束融合在一起），所以上面的背景代碼其實(shí)是這樣的：

background：linear-gradient(to bottom, #fb3 0%,#fb3 50%, #58b 100%, #58b 50%);

既然顏色漸變的起止位置可以設(shè)定，那么我們可以將兩種顏色開(kāi)始漸變和結(jié)束漸變的位置都設(shè)在背景50%的中間位置，這樣兩種顏色還沒(méi)開(kāi)始漸變就結(jié)束了，其結(jié)果如下圖：變成只有兩塊實(shí)色，各占一半面積。

background：linear-gradient(to bottom, #fb3 50%,#fb3 50%, #58b 50%, #58b 50%);

可以簡(jiǎn)寫為：

background：linear-gradient( #fb3 50%, #58b 50%);

掌握了這個(gè)技巧后，我們?cè)囍谕卣挂幌拢绻麑煞N顏色漸變開(kāi)始的位置設(shè)在30%處會(huì)是什么樣子呢？結(jié)果如下圖所示：

background：linear-gradient( #fb3 30%, #58b 30%);

我們可以看到這樣做的結(jié)果是藍(lán)色占據(jù)了70%的面積，黃色占據(jù)了30%的面積，因此我們可以通過(guò)這種方法來(lái)創(chuàng)建不等寬的條紋，只需要根據(jù)需要調(diào)整位置值即可，如下圖：

接著，要想實(shí)現(xiàn)示例中的條紋背景效果，只需通過(guò)background-size簡(jiǎn)單調(diào)整一下尺寸就OK了，比如我們添加這樣一段代碼：

background-size:100% 100px;

效果就變成下圖所示的樣子

之所以會(huì)變成這個(gè)樣子是因?yàn)楸尘霸谀J(rèn)情況下是重復(fù)平鋪的，如果background設(shè)置成no-repeat，它的真實(shí)效果是下圖這樣的：

如果要?jiǎng)?chuàng)建超過(guò)兩種顏色的條紋，只需要依次設(shè)置好漸變的起止位置即可，下面的代碼可以生成三種顏色的水平條紋：

background:

linear-gradient(#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);

background-size:100% 100px;

垂直條紋

理解了水平條紋后，垂直條紋就簡(jiǎn)單多了，兩者幾乎一樣，只需將上面的代碼稍微改動(dòng)兩處即可實(shí)現(xiàn)

一個(gè)是漸變的方向，改為to right，另一個(gè)是background-size的值，將高度設(shè)為100%，寬度調(diào)為合適的值

background:

linear-gradient(to right,#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);

background-size:100px 100%;

斜向條紋

同樣，根據(jù)上面的經(jīng)驗(yàn)，我們通過(guò)改變相應(yīng)的參數(shù)便可以實(shí)現(xiàn)斜向條紋，但是會(huì)有些麻煩，比如確定寬度，指定不同的角度等都會(huì)帶來(lái)相應(yīng)的問(wèn)題，不建議采用，這里也不過(guò)多贅述，感興趣的同學(xué)可以自行去探索。

這里我們采用一種簡(jiǎn)單方法來(lái)創(chuàng)建，即通過(guò)repeating-linear-gradient（）來(lái)實(shí)現(xiàn)，下面這段代碼便可以生成一個(gè)簡(jiǎn)單的斜向條紋背景：

background:repeating-linear-gradient（

45deg, #fb3 0,#fb3 50px,#58a 50px,#58a 100px）;

這樣只要確定好角度，然后分別設(shè)置每種顏色起始位置和終止位置即可，讓后其會(huì)自動(dòng)填充，如果需要三種顏色在后面繼續(xù)添加就可以了，如下所示：

background:repeating-linear-gradient（

45deg, #fb3 0,#fb3 50px,#58a 50px,#58a 100px，red 100px,red 150px）;

今天就介紹到這里，感興趣的同學(xué)趕緊試試吧，如果發(fā)現(xiàn)本教程存在什么問(wèn)題或有什么不足還望多多指正。

本文由“國(guó)外那點(diǎn)兒事”發(fā)布，2017年6月12日