h1 {
padding-left:30px;
background:url(/images/bullet.gif) no-repeat left center;
}
图3-1 使用背景图像创建符号
最后两个关键字指出图像的位置。在这个示例中，图像定位在元素的左边并且垂直居中。除了使用关键字之外，还可以使用像素或百分数等单位设置背景图像的位置。
如果使用像素设置背景位置，那么图像左上角到元素左上角的距离为指定的像素数。所以，如果指定垂直和水平位置都是20像素，那么图像左上角出现在元素左上角下面20像素、左边20像素的地方。但是，使用百分数进行背景定位的工作方式不太一样。百分数定位并不对背景图像的左上角进行定位，而是使用图像上的一个对应点。所以，如果指定垂直和水平位置都是20%，那么实际上将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置（见图3-2）。
图3-2 在使用像素进行背景图像定位时，使用图像的左上角。在使用百分数进行背景图像定位时，使用图像上的对应位置
如果希望使用百分数而不是关键字实现前面的示例，那么要将垂直位置设置为50%，这会使符号图像垂直居中：
h1 {
padding-left:30px;
background:url(/images/bullet.gif) no-repeat 0 50%;
}
规范指出，不要将像素或百分数等单位与关键字混合使用。这似乎是一个没有意义的规则，而且许多现代浏览器故意忽略了这个规则。但是，混合使用单位和关键字在某些浏览器上会导致错误，而且很可能使页面失效。因此，最好不要混合使用单位和关键字。
尽管背景图像是一个容易掌握的概念，但是它们构成了许多高级CSS技术的基础。
购买《精通CSS:高级Web标准解决方案》：http://shop.csai.cn/itbook/itbookinfo.asp?lbbh=10014414
[1] [2]