背景图像坐标定位

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

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

 背景图像基础：

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

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

由于这个渐变图像的高度是固定的，因此若是页面内容的长度超过了图像高度，那么渐变会忽然中止，解决方法是，再添加一个背景色，由于背景图像老是出如今背景颜色的上面，因此当图像结束时，背景颜色就会显示出来。

 小技巧：

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

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

 一、background-position:0 0;

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

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

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

为 background-position 属性提供值有不少方法。首先，可使用一些关键字：top、bottom、left、right 和 center。一般，这些关键字会成对出现，不过也不老是这样。还可使用长度值，如 100px 或 5cm，最后也可使用百分数。不一样类型的值对于背景图像的放置稍有差别。

 

关键字：

图像放置关键字最容易理解，其做用如其名称所代表的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字能够按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另外一个对象垂直方向。

若是只出现一个关键字，则认为另外一个关键字默认是 center。

因此，若是但愿每一个段落的中部上方出现一个图像，只需声明以下：

p {

    background-image:url('bgimg.gif');

    background-repeat:no-repeat;

    background-position:top;

  }

下面是等价的位置关键字：

单一关键字	等价的关键字
Center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

 

 

百分数值：

百分数值的表现方式更为复杂。假设你但愿用百分数值将图像在其元素中居中，这很容易：

body {

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:50% 50%;

  }

KEY:  这会致使图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐（重合）。

例如：若是图像位于 0% 0%，其左上角将放在元素内边距区的左上角。若是图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。（也就是top,left,bottom,center…均可以对应0%，100%和50%）

所以，若是你想把一个图像放在水平方向 2/三、垂直方向 1/3 处，能够这样声明：

body {

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:66% 33%;

  }

若是只提供一个百分数值，所提供的这个值将用做水平值，垂直值将默认为50%。这一点与关键字相似。

background-position 的默认值是 0% 0%，在功能上至关于 top left。这就解释了背景图像为何老是从元素内边距区的左上角开始平铺，除非您设置了不一样的位置值。

 

举例说明：

 background:#FFF url(image) no-repeat fixed 50% -30%;

这个时候图片应该在容器的什么位置呢,算法公式以下：

图片左顶点距容器左顶点的坐标位置为 

x：（容器的宽度-图片的宽度）x50% 

 y：（容器的高度-图片的高度）x（-30%） 

获得的结果应用坐标法则，差值若是为负数，百分比为正那么运算结果是负值。若是差值为负数，百分比也为负数，那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能获得图片的位置。 

好比：

容器是width：600px；height：600px；

图片是width：200px；height：200px； 
咱们用上面的样式，能够获得图片位置为：

x：(600px-200px)*50% 
y：(600px-200px)*(-30%) 

 

长度值：

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

好比，若是设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body{

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:50px 100px;

  }

注意，这一点与百分数值不一样，由于偏移只是从一个左上角到另外一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

例如在一个宽高均为300px的容器中，使用：
background-position: 150px 150px;

能够看到背景图片的左上角顶点（坐标0,0）定位到了齐容器的中心点（坐标150px,150px）。

而把150px替换为50%，使用background-position: 50% 50%;

看到的并不是以下的效果：


而是这样：


可见，CSS计算出了背景图片的中心点。这也能够解释为何咱们在使用：

background-position: 100% 100%;

定位的时候，图片被放置在容器的右下角，而并无跑出容器。（若是使用 background-position: 300px 300px; 的话，背景图片会被移出容器）
一样，若是使用：

background-position: 20% 20%;

会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。

 

另外能够参考：http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html