CSS揭祕：5.條紋背景（上）

條紋背景

背景知識：CSS線性漸變，background-size

CSS線性漸變

  background: linear-gradient(red, yellow, blue);
  background: linear-gradient(red 0%, yellow 50%, blue 100%);
  background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
  background: linear-gradient(90deg, red 0%, yellow 50%, blue 100%);

1. to right代表漸變偏移角度，to right (相當於90deg)
2. red，yellow，blue代表漸變色，表示從red - yellow - blue (相當於red 0% - yellow 50% - blue 100%)。 意思是從0%距離處爲red，通過0%-50%的距離漸變到yellow，再通過50%-100%的距離漸變到blue。
   1. linear-gradient(90deg, red 0%, yellow 50%, blue 0) 等價於 linear-gradient(90deg, red 0%, yellow 50%, blue 50%) 因爲當你的色標位置值設置爲0時，會自動調整爲前一個色標位置值。
   2. linear-gradient(90deg, red 20%, yellow 50%, blue 100%); 代表從0-20%都爲red色。
   3. linear-gradient(90deg, red 20%, yellow 20%, blue 100%); 代表從20%處顏色突然變化爲yellow。（20%-20%之間沒有漸變距離）
   4. linear-gradient(90deg, red 20%, yellow 20%, yellow 50%, blue 100%); 代表從20%-50%處都是黃色，然後從50%處開始漸變直到100%變化爲blue

css線性漸變小結

3. line-gradient中相鄰的兩個顏色值代表，從色標A漸變到色標B。
4. 顏色後緊跟的數值，代表AB兩個顏色之間的漸變區間。（差值爲漸變區間的長度，若差值爲0，則爲突變）
5. 顏色後的數值爲0時，自動取前一位的數值。

background-size

/* 關鍵字 */
background-size: cover
background-size: contain

/* 一個值: 這個值指定圖片的寬度，圖片的高度隱式的爲auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 兩個值 */
/* 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

1. cover代表背景圖片覆蓋背景尺寸，可能只能看到放大後的背景圖片的一部分。
2. contain代表背景圖片裝入背景尺寸，可能會看到背景留白。
3. 兩個值分別爲寬，高，高可以省略，默認auto

摘自MDN background-size

水平條紋

首先我們來實現一下水平條紋的效果。

水平 First Try

我們瞭解了line-gradient的能力之後。我們可以通過極端縮小兩個顏色之間的過渡間距來實現顏色突變的效果。background: linear-gradient(#fb3 50%, #58a 50%);

CSS圖像（第三版）：如果多個色標具有相同的位置，它們會產生一個無限小的過渡區域。過渡的起止色分別是第一個和最後一個指定值。從效果上看，顏色會突然變化，而不是一個平滑的漸變過程。

水平 Second Try

目前看來我們已經實現了兩個巨大的條紋，分別佔據一半的高度。接下來我們再加上background-size的能力。background-size: 100% 20px;

我們通過控制背景的尺寸，高度設置爲20px，那麼，各佔50%背景尺寸高度的實際尺寸就變成了10px高。再加上背景的默認是重複平鋪的，所以就實現了條紋的效果了。

水平 Third Try

現在實現了兩種顏色的交叉條紋。那麼如果三種顏色，四種顏色怎麼辦呢？我想看到這裏大家思考之後都會知道如何實現。

background: linear-gradient(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0);
background-size: 100% 60px;

水平條紋的顏色基本都可以實現了

水平 Forth Try

我們再來嘗試嘗試加上透明度的效果

background: linear-gradient(rgba(255, 187, 51, 0.9) 0%, rgba(255, 187, 51, 0.2) 33%, rgba(85, 136, 170, 0.9) 0, rgba(85, 136, 170, 0.2) 66%, rgba(154, 205, 50, 0.9) 0, rgba(154, 205, 50, 0.2) 100%);
/* background: linear-gradient(rgba(255, 187, 51, 0.2) 0%, rgba(255, 187, 51, 0.9) 33%, rgba(85, 136, 170, 0.2) 0, rgba(85, 136, 170, 0.9) 66%, rgba(154, 205, 50, 0.2) 0, rgba(154, 205, 50, 0.9) 100%); */
background-size: 100% 60px;

background: linear-gradient(rgba(255, 187, 51, 0.2) 0%, rgba(255, 187, 51, 0.9) 33%, rgba(85, 136, 170, 0.2) 0, rgba(85, 136, 170, 0.9) 66%, rgba(154, 205, 50, 0.2) 0, rgba(154, 205, 50, 0.9) 100%);
background-size: 100% 60px;

加上了透明度配合漸變，實現了一些立體凹陷和飽滿的條紋效果。

垂直條紋

實現過了水平條紋，垂直條紋還不是手到擒來。
我們只需要在上述的水平條紋代碼中做兩處改變即可。

1. 漸變裏參數添加角度，to right 或者 90deg
2. background-size 參數互換位置。

background: linear-gradient(90deg, #fb3 33%, #58a 0, #58a 66%, yellowgreen 0);
background-size: 100% 60px;

其他效果留給大家去實踐~