css漸變背景的頂級用法：linear-gradient()

SimoonJia發表於2024-11-01
CSS

css漸變背景的頂級用法：linear-gradient()

background-image:linear-gradient(110deg, rgb(1, 228, 161) 49%, rgb(0, 0, 0) 2% 51%, rgb(226, 237, 251) 49%);

linear-gradient詳解：

簡單例項：從頭部開始的線性漸變，從紅色開始，轉為黃色，再到藍色:

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

linear-gradient() 函式用於建立一個表示兩種或多種顏色線性漸變的圖片。

建立一個線性漸變，需要指定兩種顏色，還可以實現不同方向（指定為一個角度）的漸變效果，如果不指定方向，預設從上到下漸變。

/* 從上到下，藍色漸變到紅色 */
linear-gradient(blue, red);
 
/* 漸變軸為45度，從藍色漸變到紅色 */
linear-gradient(45deg, blue, red);
 
/* 從右下到左上、從藍色漸變到紅色 */
linear-gradient(to left top, blue, red);
 
/* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最後以紅色結束 */
linear-gradient(0deg, blue, green 40%, red);

css漸變背景的頂級用法：linear-gradient()

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction 用角度值指定漸變的方向（或角度）。
color-stop1, color-stop2,... 用於指定漸變的起止顏色。

例項介紹：

從左側開始的線性漸變，從紅色開始，轉為黃色:

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

從左上角到右下角的線性漸變:

#grad {
  background-image: linear-gradient(to bottom right, red , yellow);
}

線性漸變指定一個角度:

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

多個終止色:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

用了透明度:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

相關文章