背景图片与图片的区别：背景图片属于css 不占位置，图片元素占位置
background:是个复合属性
1.background-color(背景颜色）
2.background-img:url(" ")
background-repeat:repeat(默认值) no-repeat(不平埔)
3 background-position:x y 给一个值代表x方向上的margin, y方向默认居中
给两个值分别代表x y 方向上margin
支持负值
center:上下左右都居中(绝对居中)
只设置left`right,垂直方向居中 只设置top bottom,水平方向居中 left最左 right最右 top最上 bottom最下
不要用百分比值
4 background-size:w h ,只给一个值，代表宽度，高度等比列缩放
给两个值，分别代表宽高
给百分比，是相对于父容器的宽度与高度，如果只给一个值，代表宽度相对于父容器，高度等比例缩放
可用百分比值给两个值一般会失真
cover（等比列）:背景图片填充整个父容器，不留缝隙 contain（等比列）:背景图片包含在父容器内，可能留缝隙
复合写法：background: url(" ") no-repeat position/size color
注意如果position没变化要写 0 0不能不写
background:url("") no-repeat 0 0 /size
精灵图：把一堆小图标放在一张图上。 优点：减少请求次数，加快加载速度。
利用background里的img的position与外部小盒子大小，使适当的小图标充斥小盒子即为引用精灵图标。
审查元素 右键url open in new tab 选项，如果出现图片网页即为引入成功。
网页中即使图片img也会包裹在div 内，不会造成布局塌陷。