背景图片剪裁之background-size

将网站的背景和到一张大图片上，相比于每一个部分用一张小图片做背景，可以减少请求的次数，提高访问的速度。

基本方法：

给元素设置

 div{
background：url(image.png);
background-size:80px 60px;
background-position:80px 100px;
}

三行分别要表达的意思就是：

1.设置背景图片的地址

2.显示出多大的部分。

3.从这张大背景的哪个位置开始显示。

对于移动端有一个问题就是屏幕大小不同需要自动变化大小，一般需要用百分比而不是像素来定义。

例如是一张大的背景图片，用它来替代原来8张小图的设计。对于每一块都有：

.subClassItem {
	float: left;
	width: 25%;
	/*height:auto!important;   
    height:100px;   
    min-height:100px;     */
	/*border: 1px solid black;*/
	background: url(/static/images/course/77.png);
	
	background-size: 400% 200%;
}
.blank{
	padding: 39% 0;
	width: 100%;
}

#box1 {
	background-position: 0% 0%;
}

#box2 {
	background-position: 33.333333% 0%;
}

#box3 {
	background-position: 66.66666% 0%;
}

值得注意的是，横向有4部分，但background-positionX并不是25 50 75 100 ，而是33,66,100.这是因为用百分比时，含义是背景图的百分比的位置和元素百分比的位置重叠。

background-size 设置成400%，200%的原因是为了让背景正好是小块的8倍，也即一个小块显示的也是背景图中的一个小块。从而实现了宽的自适应。

那么高度的自适应如何做到呢？由于这种小块一般内容为空，所以没有高度，强行设置一个像素高度也没法随宽度变化，造成比例失真，办法就是在块内添加一个blank元素，利用padding-top/padding-bottom的百分比基数取决于父元素宽度，实现横向对纵向的影响。