用CSS3设置多个背景、背景渐变、指定背景大小

CSS3规范中定义的背景属性有：

下面我们以5个例子来说明一些新的CSS3的功能。其中，CSS3允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中写的顺序来定，最先写的背景在最上层。

background:url(../img1.jpg) 0 0 no-repeat,
           url(../img2.jpg) 200px 0 no-repeat,
           url(../img3.jpg) 400px 201px no-repeat;                         

是背景的简写方式，除了默认值之外，等效于下面的写法：

background-image:url("../img1.jpg"),url("../img2.jpg"),url("../img3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;  

另外一个需要注意的是：背景渐渐也是一个背景层:

background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1),  rgba(255, 0, 0, 0)),
                  url("../img1.jpg");

注意:上的写法顺序不能颠倒，如果写成

background-image:url("../img1.jpg"),
                  -moz-linear-gradient(left, rgba(0, 255, 0, 1),  rgba(255, 0, 0, 0));

就看不出渐变效果了。

渐变的颜色表示方法还有很多,请见：CSS3中颜色表示方法