CSS背景漸變是一種能夠使網頁背景色或元素顏色逐漸變化的效果。使用CSS實現背景漸變并不難,只需要使用linear-gradient屬性結合預設的顏色值就可以輕松實現。
/* 使用線性漸變的背景漸變示例 */ background: linear-gradient(to bottom, #ffffff, #ff0000); /* 預設從上到下的線性漸變,起點顏色為白色,終點顏色為紅色 */ background: linear-gradient(to right, #000000, #ffffff); /* 預設從左到右的線性漸變,起點顏色為黑色,終點顏色為白色 */ background: linear-gradient(to right top, #ff0000, #ffffff); /* 預設從左下到右上的線性漸變,起點顏色為紅色,終點顏色為白色 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); /* 預設從上往下的線性漸變,起點透明度為0,終點透明度為1,#000000即為黑色 */ background: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* 預設從左到右的漸變,起點顏色為紅色,中點顏色為綠色,終點顏色為藍色 */ background: linear-gradient(135deg, #768bff 0%, #4fb4ff 100%); /* 預設漸變方向為135度,起點顏色為淡藍色,終點顏色為淺藍色 */
使用CSS預設線性漸變可以輕松實現背景漸變效果。另外,漸變方向、起點和終點顏色、透明度等都可以按需預設,達到豐富多彩的效果。