CSS3中背景的高级用法！！！

背景半透明

- 1.强烈推荐：  background: rgba(r,g,b,alpha);
 r,g,b 是红绿蓝的颜色，  alpha 是透明度的意思，取值范围是 0~1 之间。

- 2.了解ie低版本浏览器 半透明
filter:Alpha(opacity=50) ；   // opacity值为0 到 100

但是 此属性是盒子半透明，不是背景半透明哦，因为里面的内容也一起半透明了
因此，低版本的 ie6.7浏览器，我们不需要透明了，直接采用优雅降级的做法。

background: gary;

background: rgba(0,0,0,.2);

写上两句 背景， 低版本ie只执行gray， 其他浏览器执行 半透明下面这一句。

背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，这里只讲解线性渐变
语法格式如下：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。

- 一个元素可以设置多重背景图像。 
- 每组属性间使用逗号分隔。 
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上。

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
		   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;