CSS 背景色 背景圖片 漸變背景 - 線性漸變 background-image: linear-gradient()

linear-gradient() 函數用來建立線性漸變的圖片

---

基礎語法：

background-image: linear-gradient( 
	[ angleValue, ]  
	SPointColor SPointPosition, 
	[ MPointColor MPointPosition, ] 
	[ EPointColor EPointPosition ] 
)

參數說明：

參數	說明	備註
angleValue	定義漸變的方向 可能的值 沒有值 == 從上到下 0deg == 從下到上 left == 從左到右 left top == 從左上角到右下角	使用 0deg 這樣的形式 能夠接受負數 表示 逆時針旋轉 -90deg === 270deg
SPointColor	起始點的顏色值 能夠是任意合法的顏色表示方式 例如： red / blue #ccc / #000 rgb(0,0,0) rgba(0,0,0,0) ……
SPointPosition	起始點的位置 通常採用 「20%「 這樣的百分數表示 沒有這個參數表示 「0%」 容器的邊緣開始
MPointColor	中間點的顏色 能夠有 也能夠沒有
MPointPosition	中間點的位置 若是沒有中間點顏色 只有中間點的位置 那麼這個點的位置 就是 SPointColor 同 EPointColor 權重相等的位置 若是沒有 MPointColor 和 MPointPosition 參數 ,那麼 SPointColor 同 EPointColor 權重相等的位置位於 SPointPosition 和 EPointPosition 的正中間
EPointColor	結束點的顏色
EPointPosition	結束點的位置	結束點位置的值 能夠大於 100% ，例如 200% 也是合法的

• 備註說明：
  • 通常而言 SPointPosition < MPointPosition < EPointPosition; 若是 SPointPosition > MPointPosition 那麼 SPointColor 會遮蓋住 MPointColor ,遮蓋的範圍是從 0% ~ SPointPosition ，這個範圍內沒有沒有漸變效果，是 SPointColor 的純色；

---

• 實例效果

  • 只有 SPointColor 和 EPointColor 兩個參數的效果

  background-image: linear-gradient( red, blue );

  ---

  • 帶有 angleValue 、SPointColor 和 EPointColor 參數的效果

  background-image: linear-gradient( left, red, blue );

  ---

  • angleValue 使用角度表示的效果

  background-image: linear-gradient( 45deg, red, blue );

  ---

  • angleValue 是負數 同時 有中間點的效果

  background-image: linear-gradient( -45deg, red 0%, yellow 20%, blue 90% );

  ---

  • 沒有 MPointColor 可是有 MPointPosition 的效果

  background-image: linear-gradient( 90deg, red 0%, 30%, blue 100%);

---

備註

1. linear-gradient() 函數定義的是一個漸變的圖片，而不是漸變顏色 ，因此搭配的是 background-image 而不是 background-color

---

相關內容：
CSS 背景色 背景圖片 漸變背景 - 重複線性漸變 background-image: repeating-linear-gradient()
CSS 背景色 背景圖片 漸變背景 - 徑向漸變 background-image:radial-gradient()