background的详细介绍

首先，我们来讲一下单标签，单标签的概念就是没有结尾标签。比如img br hr link 等

单标签最后的那个斜杠可加可不加，但是不要这样做，一定要加上反斜杠！。单标签的概念比较简单，在这里就不多做讲解了。
在这里引入一下html页面的一些特殊符号：
空格 =   这里注意，& 和 ; 一个都不能少，

之前，我们一直采用background的方式来增加背景颜色，background还有另外一个方式，就是增加背景图片，代码格式为：background:url(‘xxxxxx.jpg’)

最后效果为：

这个css样式默认是平铺的。我们可以手动修改他的展现方式，一般有以下几种：
1.不平铺
语法：background:url(“xxxx.jpg”) no-repeat;

不平铺就是展现原始的图片大小，若图片宽高小于浏览器宽高，则会出现空白
2.X、Y轴平铺：
语法：background:url(“xxxx.jpg”) repeat-X;/background:url(“xxxx.jpg”) repeat-Y;

X轴屏幕就是对X轴做拉伸，Y轴同理。
3.平铺
语法：background:url(“xxxxxx.jpg”) repeat;

repeat平铺相当于repeat-X+repeat-Y

那么我们来做一个background的综合例子：
首先，我们定义一个div,放入一张背景图片：

效果如图：

我们再在img里插入一个背景图片：

效果如图：

这里注意一点，.box 里的 margin:0 auto 针对的是body,而.imgbox 里的margin:0 auto; 针对的是.box,他们的父级并不一样，并且所有的元素默认都是靠左顶点靠齐。
这边的宽度和高度都是和图片等宽高的，图片的大小可以在系统里面查看：

接下来，我们要把imgbox的背景图移到box的黑色处，结合起来，那么我们加一个margin：

但是，写完，我们会发现：

父级div的背景图片也跟着下来了，这是因为我们的imgbox图片本身有400的高度，我加了100px的上下间距，高度变成了600，超过了父级div 560的高度，所以，造成了图片的溢出。之前我在文中提到过，溢出的解决办法就是，增加一个overflow：

再来看一下效果：

这个时候，imgbox的图片就很好的拉开了间距。那么，我们如何把这个图片正好契合到box的黑色处呢？
box的高度为560，图片的高度为400，那么相减得知，我们需要在上方留出160px的高度，所以，在这里设置margin 为 margin:160px auto;

这个时候，图片就能很好的契合在一起了：

此外，还有一个background-position,该样式的作用是用于改变背景图片的位置，比如，我现在有这样的一张图片：

我将这张图片放入background:url(“”),如果我只需要显示第5部分的图片，那么该怎么做呢？
首先，我需要定义一个小格大小的div：

效果如下图：

默认是在第一张图片。这里我们就需要用到background-position来进行对背景图片的位移：

效果如下图：

这样，我们就很好的对背景图片进行了位移。那么这个场景会出现在哪里呢？在实际工作的项目中，其实我们看到的很多页面上的元素，比如小图标，小按钮，小图案等，都是一张大图所生成的。显示的原理和我们上面所介绍的原理一致。就是通过位移只显示到自己所需要的那个图标。其他的全部隐藏掉。
那么这样的作用在哪里呢？很明显，如果我们把所有图标分散开，变成一个个小的jpg文件。那么，这个网页在第一次打开加载的时候，需要加载很多的jpg图片文件，无形之中使网页的打开速度变的很慢。但是，如果把这些小图标整合起来，变成一个大的jpg文件，那么我相信，这个网页的打开效率会提升很多。
另外，我再介绍一下，上面的:-93px -81px是怎么来的呢，其实，我并没有算的那么精准，我使用的google浏览器，按F12，会出现一个html的调试工具，如图：

这个时候，只要你在需要调整的元素值上单击一下，就可以进入调试状态：

选到这个-93px，然后按住小键盘的↑和↓，就可以实时的调试代码，进行查看。
之后将自己满意的一个属性值复制到自己的代码上，就可以实现代码的调整了。