CSS的linear-gradient屬性用于創建一個線性漸變的背景色或背景圖像。它通過指定起始點和結束點,并在這兩個點之間創建一個顏色過渡來實現漸變效果。
以下是一些使用linear-gradient屬性的案例:
.background {
background: linear-gradient(to right, #FF0000, #0000FF);
}
這個例子創建了一個從紅色到藍色的水平漸變背景色。
.background {
background: linear-gradient(to bottom, #FF0000, #0000FF);
}
這個例子創建了一個從紅色到藍色的垂直漸變背景色。
.background {
background: linear-gradient(to bottom right, #FF0000, #0000FF);
}
這個例子創建了一個從紅色到藍色的對角線漸變背景色。
.background {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
這個例子創建了一個從紅色到紫色的多色漸變背景色。
.background {
background: linear-gradient(to right, #FF0000, #0000FF), url(image.jpg);
}
這個例子創建了一個從紅色到藍色的漸變背景色,并覆蓋上了一個背景圖像。
以上是一些使用linear-gradient屬性的案例。你可以通過調整參數來創建不同方向、顏色和效果的漸變背景。