閱讀(12.5k) 書(shū)簽贊(0) 我要糾錯(cuò)

條紋背景

2018-02-24 15:42 更新

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

問(wèn)題

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

解決方案

首先，假設(shè)我們需要一個(gè)簡(jiǎn)單地垂直漸變，顏色從?#fb3?到?#58a：

條紋背景

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

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

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

條紋背景

圖2注：現(xiàn)在漸變占據(jù)了整體60%的高度，其余的部分都是純色；顏色過(guò)渡點(diǎn)的位置在這里使用虛線標(biāo)識(shí)出來(lái)

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

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

條紋背景

圖3注：現(xiàn)在漸變占據(jù)了整體20%的高度，其余的部分都是純色；顏色過(guò)渡點(diǎn)的位置在這里使用虛線標(biāo)識(shí)出來(lái)

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

"如果多個(gè)顏色過(guò)渡點(diǎn)的位置相同，那么就會(huì)在兩個(gè)顏色之間生成一個(gè)無(wú)限小的過(guò)渡。實(shí)際效果就是，一個(gè)顏色不再會(huì)流暢地過(guò)渡到下一個(gè)顏色了，而是會(huì)突然變成下一個(gè)顏色。" —?CSS Image Values Level 3

正如下圖中看到的那樣，已經(jīng)看不到顏色過(guò)渡區(qū)域了，只有兩種純色，每種純色占有容器一半的高度?？梢哉f(shuō)，我們已經(jīng)創(chuàng)建了兩個(gè)寬大的水平紋理。

條紋背景

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

因?yàn)闈u變本質(zhì)上就是?backgroud-image，所以我們可以像對(duì)待?background-image?一樣使用?background-size?調(diào)整大小：

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

就像下圖看到的那樣

條紋背景

圖5注：我們生成的背景沒(méi)有使用平鋪

我們將兩條紋理都縮小到了?15px?的高度。因?yàn)楸尘笆强梢云戒伒?，所以我們可以讓整個(gè)容器填充這種水平紋理了:

條紋背景

圖6注：最終的水平漸變

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

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

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

“如果某個(gè)顏色過(guò)渡點(diǎn)的位置小于它之前的顏色過(guò)渡點(diǎn)，那么該顏色過(guò)渡點(diǎn)的位置就會(huì)被重置為所有在它前面的顏色過(guò)渡點(diǎn)的最大位置?！?—?CSS Images Level 3

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

條紋背景

圖7注：不等寬條紋

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

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

條紋背景

圖8注：三色條紋

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

垂直紋理

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

條紋背景

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

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

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

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

斜紋

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

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

不過(guò)，就像下圖所示，效果非常不好。

條紋背景

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

究其原因，就是因?yàn)槲覀冎皇菍⒚恳粭l紋理旋轉(zhuǎn)了?45°，旋轉(zhuǎn)的并不是圖形整體。讓我們回憶一下使用位圖創(chuàng)建斜紋的方法，其中引入的位圖和下圖相類似。

條紋背景

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

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

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

完成后的效果：

條紋背景

圖12注：45°?斜紋；虛線用來(lái)標(biāo)識(shí)復(fù)用的區(qū)塊

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