背景图片&图片插入&精灵图片

#背景图片
background-image：背景图片的插入方式。
属性url(“图片的路径”)
注意：当图片较小时，默认会以 平铺 的方式铺满整个背景区域。
平铺：图片会在两个方向(水平和垂直方向)上重复自己，直至背景区域填充完整。
background-repeat：设置背景图片是否重复(背景图片的铺垫方式)
repeat：默认值，平铺/重复铺垫。
no-repeat:不重复。
repeat-x：水平铺垫。
repeat-y：垂直铺垫。
space：保持图片大小平铺铺满整个背景区域，剩余空间作为图片之间的间隙平均分配。
round：保持图片的完整性，根据背景区域图片相对应拉伸填充。

background-size：设置背景图片的大小。

• contain(根据容器的最小值设置图片大小)：将图片的比例收缩，图片会始终包含在容器之内，容器范围有可能不被完全占用。

• cover(根据容器的最大值设置图片大小):将图片比例缩放至完全覆盖整个容器，图片可能会超出容器。

  值：第一个值为x轴(宽度)，第二个值为y轴(高度)。
  单位：px像素，固定的大小。%百分比，以容器的大小作为标准计算。
  值为一个时，将作用于X轴(宽度)位置，高度为 auto，背景高度以X轴(宽度)为参考进行等比缩放。

background-position：背景图片定位 ,两个值分别代表X轴和Y轴(正值往右往下移动，负值相反)。
单位：px像素，固定的大小。%百分比，以容器的大小作为标准计算。
值为一个：该值将作用于X轴位置，则y轴位置为center(垂直居中)。
值通过方向定位背景图片的位置：
center居中，left左，right右，top上，bottom下
注意：方向的使用，当使用一个方向作为值，浏览器会自动检测该值作用于X轴还是Y轴，另外一个值默认为center

background-attachment:fixed;
背景固定：背景图片是否随着页面的上下翻动而跟着滚动。
scroll：默认值，背景图片会滚动。
fixed：背景图片固定。

#插入图片

inline元素

#精灵图片
什么是精灵图：
精灵图片就是将多个图片放置到一个大的图片上面。
精灵图片主要是当做背景图插入。

意义：之所以要将多个图片放置到一个图片上面，是因为很多时候背景图是放置在服务器上面的，当需要使用某张图片的时候需要向服务器发送请求资源，如果图片过多时服务器的压力就较大，所以使用精灵图可以减轻服务器压力。

精灵图的查找方式：
要想让某个指定的精灵图里的小图片显示在元素框中：
首先，先给元素框设置一个大小； width : 50px ; height : 50px;
然后，根据图片数量设置精灵图的尺寸（7*7）； background-size : 350px 700%;
最后，用定位移动图片显示在窗口中的位置以显示想要的图片（坐标3，3）。
background-position : -200% -200px；（从一移到三要移动两次）
x轴：正值往上移动，负值往下移动。
y轴：正值往左移动，负值往右移动。