顔色漸變設置：background: linear-gradient(direction, color-stop1, color-stop2, ...); 指定背景圖片大小：background-size: length|percentage|cover|contain;

在網頁設計和其他傳統媒介中，各種尺寸、顔色、角度的條紋圖案在視覺設計中無處不在。想要在網頁中實現條紋圖案，通常我們的方法是創建一個單獨的位圖文件，然後每次需要做些調整時，都用圖像編輯器來修改它。如果我們可以直接在 CSS 中創建條紋圖案，那該有多好啊！

假設我們有一條基本的垂直線性漸變，顔色從 #fb3 過渡到 #58a（如圖1-1）

圖1-1

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

現在，讓我們試着把這兩個色标拉近一點（參見圖1-2）

圖1-2

漸變現在出現在總高的 60% 區域，剩下的部分顯示為實色，色标的位置用虛線标示出來了。

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

現在容器頂部 20% 的區域被填充為 #fb3 實色，而底部 20% 區域被填充為 #58a 實色，真正的漸變隻出現在容器 60% 的高度區域。

如果我們把兩個色标繼續拉近（分别改為 40% 和 60% ，參見圖1-3），那真正的漸變區域就變得更窄了。

你是不是開始好奇，如果我們把兩個色标重合在一起，會發生什麼？

圖1-3

漸變現在出現在總高的 20% 區域，剩下的部分顯示為實色，色标的位置用虛線标示。

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

圖1-4

我們在圖1-4 中可以看到，已經沒有任何漸變效果了，隻有兩塊實色，各占據了 background-image 一半的面積。

本質上，我們已經創建了兩條巨大的水平條紋。因為漸變是一種由代碼生成的圖像，我們能像對待其他任何背景圖像那樣對待它，而且還可以通過 background-size 來調整其尺寸：

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

圖1-5

在圖 1-5 中可以看到，我們把這兩條條紋的高度都縮小到了 15px 。由于背景在默認情況下是重複平鋪的，整個容器其實已經被填滿了水平條紋。

我們還可以用相同的方法來創建不等寬的條紋，隻需調整色标的位置值即可。

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

為了避免每次改動條紋寬度時都要修改兩個數組，我們可以再次從規範那裡找到捷徑。

“如果某個色标的位置值比整個列表中在它之前的色标的位置值都要小，則該色标的位置會被設置為它前面所有色标位置值的最大值。”

圖1-6

這意味着，如果我們把第二個色标的位置值設置為 0，那它的位置就總會被浏覽器調整為前一個色标的位置值，這個結果正是我們想要的。因此下面代碼會産生跟圖 1-6 一樣的條紋背景。

如果要創建超過兩種顔色的條紋，也是很容易的。舉例來說，下面的代碼可以生成三種顔色的水平條紋（參考圖1-7）

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

圖1-7

以上就是本期使用 CSS 創建條紋背景的實踐分享，希望對大家有幫助。

下期給大家分享更多實戰中的點滴，如果大家對此感興趣，歡迎各位關注、留言，大家的支持就是我的動力！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!