CSS3之前我们可以对背景添加一张图片

CSS3允许我们在一个元素上添加多个图片

多重背景图片

<p class="demo"></p>

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url('1.png') no-repeat;}

多重背景可以把多个图片资源添加到background属性上，用逗号隔开
然后用background-position把他们定位到你想要的位置

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png') no-repeat 400px 0;}

如果不设置no-repeat下面的图片资源会覆盖上面的图片资源

图片起始位置background-origin

background-origin允许我们定义图片从哪儿开始定位
可选的属性值padding-box（默认）、border-box、content-box;
padding-box默认图片从内边距开始
我们可以加上内边距证明这一点

.demo {    width: 600px;    height: 200px;    border: 20px solid gray/*改*/;    padding: 20px/*增*/;    background: url('1.png') no-repeat,                url('2.png') no-repeat 200px 0,                url('3.png') no-repeat 400px 0;}