css的那些事儿--background的多张背景的实现

一般来说在一个元素中可以使用一个背景图就可以了，但如果自己想要用多个图片呢，又要怎么办呢？

答案就在这里，还是利用background-image属性：只不过值变成了你想要添加的背景图路径 url（img1），url（img2），url（img3）...，这里将出现的效果，展现的是最上面的那个背景图（img1在最上面，以此类推），给每一个背景图添加属性background-repeat：no-repeat，no-repeat，repeat-y；总之一一对应即可，其他background的属性也是一样，只不过该方法有一缺点就是不兼容ie8;

.container{
	width: 100%;
	height: 100%;
	background: url('../images/0008020299365036_b.jpg') no-repeat,
				url('../images/0020032981417393_b.jpg') no-repeat,
				url('../images/14793635_154116498000_2.jpg') no-repeat;
	background-size: cover,cover,cover;
}

考虑到ie8还是比较常见的浏览器，那么该如何解决这个问题呢，解决办法还是有的，可以分为两类，一个是伪造多层背景，一个是利用伪类：before 和：after。

代码就不写了。

伪造多层背景，就是利用元素的嵌套关系，给每一个元素都加背景图即可，另一种方法就是在一个元素比如说.container:before添加内容url（img1），.container:aftert添加内容url（img2），具体如下：

.container{
	background-image: url('../images/0020032981417393_b.jpg')
}
.container:before{
	content: url('../images/0008020299365036_b.jpg');
	position: absolute;
	left: 0;
	top: 0
}
.container:after{
	content: url('../images/14793635_154116498000_2.jpg');
	position: absolute;
	left: 0;
	top: 0
}