條紋背景

原文出處：http://www.w3cplus.com/css3/css-secrets/striped-backgrounds.html

問題

和其他視覺設計相關的媒體一樣，在 Web 上各類大小、顏色、角度不同的紋理也非常流行。不過，實現(xiàn)這些紋理的技術卻并不理想。通常，我們需要創(chuàng)建獨立的位圖，如果有需求變更的話都需要重新更改文件。有些開發(fā)者使用 SVG 替代位圖，但是 SVG 仍然是一種獨立的文件，而且其語法也不夠友好。那么是否有一種出色的方法讓我們直接在 CSS 中創(chuàng)建紋理呢？你會驚喜的發(fā)現(xiàn)，我們將在下面的介紹中逐步解決這一問題。

解決方案

首先，假設我們需要一個簡單地垂直漸變，顏色從?#fb3?到?#58a：

圖1注：我們初始化的漸變效果

background: linear-gradient(#fb3, #58a);

現(xiàn)在，讓我們將兩種顏色的過渡點調的更近一些：

圖2注：現(xiàn)在漸變占據了整體60%的高度，其余的部分都是純色；顏色過渡點的位置在這里使用虛線標識出來

background: linear-gradient(#fb3 20%, #58a 80%);

到此為止，容器頂部20%的部分是純粹的?#fb3，底部20%的部分是純粹的?#58a，所以實際上漸變的部分只占有了容器的60%。那么如果我們將顏色過渡點（color stops）調整地更近一些（比如?40%?和?60%，如下圖所示），那么漸變的部分就會更小了。這就讓我們很自然地聯(lián)想到，如果顏色過渡點相同會發(fā)生什么呢？

圖3注：現(xiàn)在漸變占據了整體20%的高度，其余的部分都是純色；顏色過渡點的位置在這里使用虛線標識出來

background: linear-gradient(#fb3 50%, #58a 50%);

"如果多個顏色過渡點的位置相同，那么就會在兩個顏色之間生成一個無限小的過渡。實際效果就是，一個顏色不再會流暢地過渡到下一個顏色了，而是會突然變成下一個顏色。" —?CSS Image Values Level 3

正如下圖中看到的那樣，已經看不到顏色過渡區(qū)域了，只有兩種純色，每種純色占有容器一半的高度。可以說，我們已經創(chuàng)建了兩個寬大的水平紋理。

圖4注：現(xiàn)在兩個顏色的過渡點位置重合了

因為漸變本質上就是?backgroud-image，所以我們可以像對待?background-image?一樣使用?background-size?調整大?。?/p>

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

就像下圖看到的那樣

圖5注：我們生成的背景沒有使用平鋪

我們將兩條紋理都縮小到了?15px?的高度。因為背景是可以平鋪的，所以我們可以讓整個容器填充這種水平紋理了:

圖6注：最終的水平漸變

當然，我們還可以創(chuàng)建不等寬的條紋，秘訣就是調節(jié)一下顏色過渡點的位置：

background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;

為了避免每次需求變更都需要修改兩處顏色過渡點的重復工作，我們可以充分利用規(guī)范中介紹的原理：

“如果某個顏色過渡點的位置小于它之前的顏色過渡點，那么該顏色過渡點的位置就會被重置為所有在它前面的顏色過渡點的最大位置。” —?CSS Images Level 3

這意味著如果我們將第二個顏色過渡點設置為0，那么它實際的位置就會被瀏覽器重置為它前面顏色過渡點的最大位置，而這個位置恰恰就是我們需要的過渡位置。因此，下面的代碼不僅僅是和下圖 具有同樣的效果，而且更加簡潔、更具有可維護性：

圖7注：不等寬條紋

background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

創(chuàng)建更多顏色的紋理和創(chuàng)建兩種顏色的問題同樣簡單。比如，下面的代碼塊創(chuàng)建了三種顏色的紋理：

圖8注：三色條紋

background: linear-gradient(#fb3 33.3%,
            #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

垂直紋理

水平紋理非常容器創(chuàng)建，但是在 Web 上并不是所有的紋理都是水平的，此外還有很多紋理是垂直的

圖9注：垂直條紋，上面：背景沒有使用平鋪；下面：平鋪之后的條紋

而且，在視覺上最受歡迎的紋理可能是傾斜的紋理。值得慶幸的是，CSS 的漸變可以幫助我們實現(xiàn)這樣的效果，只是實現(xiàn)的難度各種不同。

實現(xiàn)垂直紋理的代碼和水平紋理的非常相似，只有一個主要的差異：一個指定漸變方向的參數。我們可以通過指定這個參數來創(chuàng)建水平紋理，不過對于此次要創(chuàng)建的垂直紋理，使用它的默認值即可（to bottom）。此外，同樣需要創(chuàng)建一個不同的background-size，原因很明顯：

background: linear-gradient(to right, /* or 90deg */
              #fb3 50%, #58a 0);
background-size: 30px 100%;

斜紋

在實現(xiàn)了水平紋理和垂直紋理之后，我們可能會嘗試通過?background-size?和漸變方向來實現(xiàn)傾斜的紋理（45°），就像這樣的代碼：

background: linear-gradient(45deg,
              #fb3 50%, #58a 0);
background-size: 30px 30px;

不過，就像下圖所示，效果非常不好。

圖10注：第一次創(chuàng)建斜紋的失敗效果

究其原因，就是因為我們只是將每一條紋理旋轉了?45°，旋轉的并不是圖形整體。讓我們回憶一下使用位圖創(chuàng)建斜紋的方法，其中引入的位圖和下圖相類似。

圖11注：這就是創(chuàng)建斜紋的拼接圖，看起來是不是很像？

它包含了四條紋理，而不是這里的兩條，所以看起來像是無縫連接的。這就是我們需要在 CSS 中重新創(chuàng)建的紋理，所以我們需要更多的顏色過渡點：

background: linear-gradient(45deg,
              #fb3 25%, #58a 0, #58a 50%,
              #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

完成后的效果：

圖12注：45°?斜紋；虛線用來標識復用的區(qū)塊

如你所見，雖然我們成功的創(chuàng)建了斜紋，但是看起來比水平和垂直紋理要窄一些。為了回答這個問題，我們需要使用學校里學到的勾股定理來計算直角三角形的各邊變長。勾股定理指出，最長邊等于其他兩邊的平方和。在直接三角形中，兩條短邊相等所以么最長邊就等于:

在我們創(chuàng)建的這個斜紋中，background-size?指定的就是三角形最長邊的邊長，因此紋理的寬度就是直角邊的長度。你可以看下圖，獲得更清晰的解釋。

圖13注：大小為?20px?的?background-size?將會生成寬度為的條紋

這就是說，如果想要獲得原來?15px?的寬度，就需要將?background-size?指定為