CSS3背景详解

一、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%);