首页 > 代码库 > 背景图像坐标定位

背景图像坐标定位

实际上,如果没有发明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 属性提供值有很多方法。首先,可以使用一些关键字: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/3、垂直方向 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

背景图像坐标定位