最近感觉HTMl中背景图片的应用非常广，比如Icon或者logo什么的都需要。就借这个机会总结一下。
1.背景图片中设置的坐标的作用：让图片自由显示在一个框中。
背景图片的坐标有2个数字组成，可参考下面代码。其中第一个数字代表容器的x轴，单位为像素，且向右为正方向；另外一个0代表容器的y轴，单位为像素，且向下为正方向。
下面展示一个具体的代码。所有的图片如图
。下面这段代码主要是为了显示图中二维码的，其他的都不显示。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> #a { height: 100px; width: 100px; background-image: url(images/person.jpg); background-position: -60px -140px; background-repeat: no-repeat; } #a a { text-indent: -9999em; float: left; } </style> </head> <body> <div id="a"> <a href="#nogo">Icon</a> </div> </body> </html>
运行代码，显示的为这张图中最左边的二维码。
所以背景图片的坐标点事相对于容器的左上角而言的
2.背景图片的作用范围。这里主要讨论背景图片是否支持内边距和外边距。还是使用上面的图片，图片的大小为600*337，现在我们就来设置一个<div>让它的大小等于框的边界，另外设置框的内编剧为80。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> #b { height: 337px; width: 600px; background-image: url(images/person.jpg); background-position: 0px 0px; padding: 100px; } </style> </head> <body> <div id="b"> </div> </body> </html>
运行代码，可见背景图片覆盖了内边距部分。
