渐变背景
语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值 | 描述 |
direction | 用角度值指定渐变的方向(或角度)。 |
color-stop1, color-stop2,... | 用于指定渐变的起止颜色。 |
实例:
线性渐变指定一个角度:
background-image: linear-gradient(135deg, #F7CD1E 0%, #F79A1E 100%);
从左侧开始的线性渐变:
background-image: linear-gradient(to right, red , yellow);
从左上角到右下角的线性渐变:
background-image: linear-gradient(to bottom right, red , yellow);
多个终止色:
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
使用透明度:
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));