CSS颜色渐变图像渐变

向下渐变&＃xff1a;
background: linear-gradient(to bottom, blue, white);

向右渐变&＃xff1a;
background: linear-gradient(to right, blue, white);

向右下角渐变&＃xff1a;
background: linear-gradient(to bottom right, blue, white);

角度渐变&＃xff1a;
background: linear-gradient(70deg, red, white);

角度是指水平线与渐变线之间的角度&＃xff0c;以顺时针方向旋转。总之&＃xff0c;0deg 创建一个从底部到顶部的垂直渐变&＃xff0c;当变成90deg时生成一个从左到右的水平渐变。

图像渐变&＃xff1a;渐变是支持透明度的。 举个例子&＃xff0c;当你叠加多个背景层&＃xff0c;你可以使用这个在背景图片上来创建淡入淡出的效果 :
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);