自从有了CSS3之后，要想在同一个DIV里面设置多张图片，实在是一件很简单的事情，下面就为大家介绍这个。
一、css3设置多张背景图片
可以如下写：
background:url("1_s.jpg") 0 0 no-repeat,
url("2_s.jpg") 200px 0 no-repeat,
url("3_s.jpg") 400px 201px no-repeat;
也可以这么写：
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
二、CSS3设置颜色渐变的背景
①水平渐变
{background-image:linear-gradient(left, red 100px, yellow 200px);}
②左上角渐变
那从(100px, 100px)到(200px, 200px)应该就是从左上角开始，写法如下：
{background-image:linear-gradient(left top, red 100px, yellow 200px);}
知识拓展：
CSS3/CSS1 background-image 属性
语法:
background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值：none
取值：
none：无背景图。
< url >：使用绝对或相对地址指定背景图像。
< linear-gradient>：使用线性渐变创建背景图像。（CSS3）
< radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）
< repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）
< repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）
说明：
设置或检索对象的背景图像。
如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。
对应的脚本特性为backgroundImage。