先来了解下背景属性background

取值：

background-image：
指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”
background-position：
指定背景图像在元素中出现的位置。
background-size：
指定背景图像尺寸。
background-repeat：
指定背景图像如何填充。
background-attachment：
定义滚动时背景图像相对于谁固定。
background-origin：
指定背景图像从元素的哪个区域作为显示的原点。
background-clip：
指定背景图像向外裁剪的区域。
background-color：
指定背景颜色。

background-position：

取值：

：
用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
：
用长度值指定背景图像在元素中出现的位置。可以为负值。
center：
背景图像横向或纵向居中。
left：
背景图像从元素左边开始出现。
right：
背景图像从元素右边开始出现。
top：
背景图像从元素顶部开始出现。
bottom：
背景图像从元素底部开始出现。

指定背景图像在元素中出现的位置。

  • 该属性接受1~4个参数值。

  • 如果提供三或四个，每个 或 偏移量之前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px

    1. background: url(test1.jpg) no-repeat right 20px bottom 20px;

    要注意的是：设置3个或4个值，偏移量前必须有边界关键字。也就是说，形如：10px bottom 20px，这样的参数设置是错误的，因为10px前面没有关键字。

  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。

  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。

精灵图使用(代码)

比如说，我只想要这个草
image.png
量出大小为 167 x 113 （可以使用截图工具或者PS，我这里使用的是WPS的裁剪工具）
这棵草与整个图片左边界的距离是 802-167 = 635px，距离上边界是190 - 113 = 77px
所以我们需要一个167 x 113 的盒子，并且要将图片向左偏移 635px，向上偏移 77px

  <div class="cao"></div>
  <style>
    .cao {
      width: 167px;
      height: 113px;
      background-image: url('./blob_https___webstatic.png');
      background-position: -635px -77px;
    }
  </style>

效果：
image.png
其实可以看到图中还有一些像是被旋转过的图片，之后我们学的属性中就有一个旋转样式的属性（transition），搭配上旋转就可以使用更多的精灵图了。这是CSS进阶的内容，我们先做一点了解。

transform

http://css.doyoe.com/properties/transform/transform.htm

取值：

none：
无转换

2D Transform Functions：

matrix()：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：
指定对象X轴（水平方向）的平移
translatey()：
指定对象Y轴（垂直方向）的平移
rotate() （常用的旋转函数）：
指定对象的2D rotation（2D旋转），需先有 <’ transform-origin ‘> 属性的定义
scale()：
指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：
指定对象X轴的（水平方向）缩放
scaley()：
指定对象Y轴的（垂直方向）缩放
skew()：
指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：
指定对象X轴的（水平方向）扭曲
skewy()：
指定对象Y轴的（垂直方向）扭曲

3D Transform Functions：

matrix3d()：
以一个4x4矩阵的形式指定一个3D变换
translate3d()：
指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：
指定对象Z轴的平移
rotate3d()：
指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex() ：
指定对象在x轴上的旋转角度
rotatey()：
指定对象在y轴上的旋转角度
rotatez()：
指定对象在z轴上的旋转角度
scale3d()：
指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：
指定对象的z轴缩放
perspective()：
指定透视距离