1、背景相关属性用法
1).background-image 设置背景图片
-语法：background-image：url(相对路径);
2).background-repeat 设置背景图片的重复方式
可选值：
repeat，默认值，双方向重复平铺；
no-repeat，不重复，有多大显示多大；
repeat-x，背景图片沿水平方向重复；
repeat-y，背景图片沿垂直方向重复；
3).background-position 调整背景图片在元素中的位置，默认是贴着左上角显示
用top right left bottom center设置偏移量~px
4).background-clip 设置背景色的范围
可选值：
border-box 默认值，背景颜色出现在边框下边
padding-box 背景不会出现在边框，只会出现在内容区和内边框
content-box 背景只出现在内容区
5).background-orgin 设置背景图片的范围
设置背景图片额偏移量计算的原点，配合偏移量使用
可选值：
border-box 从边框开始计算偏移量
padding-box 从内边距开始计算偏移量
content-box 从内容区开始计算偏移量
6).background-size 设置图片的大小
参数：第一个值（宽度） 第二个值（高度）
如果只写一个，第二个值默认为auto
按图片比列给宽高效果图如下
cover 图片的比例不变，将元素铺满，效果如下
contain 图片比例不变，将图片完整显示
2、雪碧图
图片整合技术：将多个图片整合为一张图片，提高了请求速度，访问效率和用户体验
使用步骤：
先确定要使用的图标
测量图标的大小
根据测量结果创建一个元素
将雪碧图设置为元素的背景
设置一个偏移量，以显示正确的图片
<style> .box1{ width:175px; height:45px; border:1px solid red; background-image:url(绝对路径); background-position：10px 100px; } </style> <div class="box1"></div>
