web前端开发中应该知道的DIV定位背景用法

　在写博客之前 我都是会把工作中接触到的新知识放在我的微博里面，但是由于微博总是限制我的字数，有很多内容我都是分散成几个部分，现在我就来整理一个，我积累的一个页面布局的内容。
　　在早期table风行的年代，页面布局中使用的小图标，和背景会让你的页面中有非常多的图片素材，这样在加载的过程中就会很拖网速，造成页面的用户体验不好，现在div+css的广泛使用，也改变了这一使用习惯，变成了将N多小图标集于一个大图上，再通过div来定位需要用到的图片部分，这样操作能让你的页面少加载非常多的图片素材，大大提升了网页刷新的速度。
　　DIV背景定义参数：background 设置元素的背景参数，其中属性依在写博客之前 我都是会把工作中接触到的新知识放在我的微博里面，但是由于微博总是限制我的字数，有很多内容我都是分散成几个部分，现在我就来整理一个，我积累的一个页面布局的内容。

在早期table风行的年代，页面布局中使用的小图标，和背景会让你的页面中有非常多的图片素材，这样在加载的过程中就会很拖网速，造成页面的用户体验不好，现在div+css的广泛使用，也改变了这一使用习惯，变成了将N多小图标集于一个大图上，再通过div来定位需要用到的图片部分，这样操作能让你的页面少加载非常多的图片素材，大大提升了网页刷新的速度。

DIV背景定义参数：background 设置元素的背景参数，其中属性依次为 background-color(背景色) | background-image(背景图) | background-repeat(重复方式) | background-attachment(背景图像固定还是滚动) | background-position(背景图像位置)

关于background-position 定位的问题 在一张大背景下 对某一块的取用时大背景的左上角 为原点(0,0)，定位时，→指向x值减小,↓指向 y 值减少 所以在定位中，通常都是两个负数，在对定位的div进行width height 限制 就可以取出自己想要的背景图片了！

通常在使用的时候 样式中定义为 background: url(/templates/v1/images/tips.png) 0 -17px;  这种格式是现在最常用的背景定位方式

写一段完整的吧：

.up_tip {

1 width: 20px;   //定义高度和宽度

2 height: 18px;

3 background: url(/templates/v1/images/tips.png) 0 -17px;  定位图片位置

4 display: inline-block;  //这个比较重要，

}