背景图像坐标定位

实际上，如果没有发明image标签，可能就没有网页设计师这门职业。

然而对image标签的滥用可能导致纯修饰性的图像把页面弄乱。好在CSS使我们能够在页面上显示图像，而不需要让图像成为标记的一部分。实现方法是将图像作为背景添加到现有的元素中。

 背景图像基础：

默认情况下，浏览器垂直和水平的重复显示背景图像，让图像平铺整个页面。

渐变效果：目前渐变非常时髦，你可能希望在页面上应用垂直渐变，为此需要创建一个很高但是很窄的渐变图像，然后将这个图像应用于页面的主体，并让他水平平铺。

因为这个渐变图像的高度是固定的，所以如果页面内容的长度超过了图像高度，那么渐变会突然停止，解决方法是，再添加一个背景色，因为背景图像总是出现在背景颜色的上面，所以当图像结束时，背景颜色就会显示出来。

 小技巧：

1. 设置一个空的DIV，然后设置其ID，将DIV的尺寸设置为与图像相同，图像作为其背景应用并指定不重复。
2. 设置背景图像的位置（属性名称：background-position），例如：background-position：left center;（使用关键字）。还可以使用像素或百分比等单位设置图像位置。但是注意，使用像素设置背景位置，图像左上角到元素左上角的距离为指定的像素数。但是，使用百分比，并不是对背景图像的左上角进行定位，而是使用图像上的一个对应点，所以，如果指定垂直和水平位置都是20%，那么实际上是在将图像上距离图像左上角20%的点（图像上的对应点），定位到距离父元素左上角20%的位置（说白了就是各自找到20%点的位置，然后重合在一起就好了，详见下面文字解释）。

建议：最好不要混合使用关键字和单位。

 1、background-position:0 0;

背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。

2、该属性定位不受对象的补丁属性( padding )设置影响。

例如，我们给容器元素增加padding值，背景图片的左上角还是与容器元素的左上角对齐。在此处只是影响到了容器元素的高度和宽度。

为 background-position 属性提供值有很多方法。首先，可以使用一些