一、rgba模式
语法：background:rgba(r,g,b,a); a代表透明度，取值范围0~1
eg: background:rgba(255,255,255,0.5);
★rgba与opacity的区别
rgba是给背景添加一定的透明度，容器中的文本或图片不会跟随透明
opacity是给整个容器添加一定的透明度，文本和图片会跟随透明
扩展：hsla模式
语法：background:hsla(h,s,l,a);
h 色调，取值范围0~360
s 饱和度，取值范围0%~100%
l 亮度，取值范围0%~100%
a 透明度，取值范围0~1
二、背景尺寸
语法：background-size:数值|百分比|cover|contain;
1.数值
以具体的数值来设置背景图的大小，第一个值代表宽度，第二个值代表高度，如果省略第二个值，默认为auto，等比例缩放
eg: background-size:300px 200px;
2.百分比
以容器的百分比来设置背景图的大小，…
eg: background-size:100% 100%; 或 background-size:100%;
3.cover
将背景图扩展至足够大，以使背景图完全覆盖背景区域，背景图有可能超出容器，不会发生变形
4.contain
将背景图扩展至足够大，以使背景图适应内容区域，背景图不会超出容器，也不会发生变形
三、线性渐变和径向渐变
1.线性渐变
语法：background:linear-gradient(渐变方向,颜色值 渐变位置,颜色值 渐变位置);
eg: background:linear-gradient(to right,red 0%,yellow 50%,blue 80%);
注：重复的线性渐变，写法如下：
eg: background:repeating-linear-gradient(red 0%,yellow 10%,blue 20%);
注：设置重复的线性渐变时，必须设置渐变位置
2.径向渐变
语法：background:-webkit-radial-gradient(渐变中心点,渐变形状 渐变半径长度,渐变颜色 渐变位置);
eg: background:-webkit-radial-gradient(left top,circle closest-corner,red 0%,yellow 10%,black 20%);
注：重复的径向渐变
eg: background:-webkit-repeating-radial-gradient(red 0%,yellow 5%,black 10%);
