背景图片剪裁之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的百分比基数取决于父元素宽度，实现横向对纵向的影响。