渐变背景

语法:

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));

 

posted @ 2020-07-28 17:49  WillaWilla  阅读(86)  评论(0编辑  收藏  举报