您现在的位置: 365建站网 > 365学习 > CSS 背景位置 background-position属性和用法

CSS 背景位置 background-position属性和用法

文章来源:365jz.com     点击数:263    更新时间:2018-06-12 12:59   参与评论

如何定位背景图像:

body
{ 
background-image:url('image.gif');
background-repeat:no-repeat;
background-attachment:fixed;background-position:center;}

所有浏览器都支持 background-position 属性。

注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

background-position 属性设置背景图像的起始位置。


可能的值

描述
  • top left

  • top center

  • top right

  • center left

  • center center

  • center right

  • bottom left

  • bottom center

  • bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0% 0%。

x% y%

第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值,另一个值将是 50%。

xpos ypos

第一个值是水平位置,第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值,另一个值将是50%。

您可以混合使用 % 和 position 值。


我们经常使用的background-position的值就是<position>值,最近刚介绍的object-position的值也是<position>值。

<position>值支持1~4个值,可以是具体数值,也可以是百分比,也可以是left, top, right, center, bottom关键字。可参考下图经典示意:
position类型图片示意

如果偏移没有相应的关键字,则会被认为是center, 因此,background-position:top center可以直接写作background-position:top。


除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景定位技术,能够精确控制背景在对象中的位置。

默认情况下,背景图像都是从元素 padding 区域的左上角开始出现的,但设计师往往希望背景能够出现在任何位置。通过 background-position属性,可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。其语法格式为:

background-position: xpos ypos | x% y% | x y

CSS1中,background-position属性需要 2 个参数值,第一个值用于横坐标,第二个值用于纵坐标,默认值为 0% 0%,即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值,则用于 x 轴方向,y 轴方向使用默认值 center,即垂直居中。

上述语法格式表明,背景图像有 3 种定位方式:

1)xpos ypos:表示使用预定义关键字定位,水平方向可选关键字有 left | center | right,垂直方向可选关键字有 top | center | bottom。

关键字定位,应用的是对齐规则,而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐,为 right 表示图像的右边和对象的右边对齐;ypos 为 top 表示图像的顶部和对象的顶部对齐,为 bottom 表示图像的底部和对象的底部对齐;xpos、ypos等于 center表示图像在水平和垂直方向的中心,和对象在水平和垂直方向的中心对齐,即。

依然使用前面的背景图案 bg.gif,其尺寸为 100px * 100px,对象的尺寸为 200px * 200px,背景图像的位置使用预定义关键字定位。如:


  1. div {
      width: 200px;
      height: 200px;
      border: 1px dashed #ccc;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url(img/bg.gif);
    }

上述定位,就表示背景图像的中心,与背景区域的中心对齐,即背景图像位于对象的中央位置。运行结果如图 4‑28 所示:

背景图像关键字定位

图4-28 背景图像关键字定位

2)x% y%:表示使用百分比定位,是将图像本身(x%, y%)的那个点,与背景区域的(x%, y%)的那个点重合。最终得到背景图像起始位置坐标的计算公式为:

x = (对象的宽度 - 图像的宽度) * x%;

y = (对象的高度 - 图像的高度) * y%;

还是上面的例子,改为百分比定位,要使背景图像居中,只需把背景图像的位置设置为50% 50% 即可。使用上面的公式,得到背景图像起始位置的坐标为:

x:(200px - 100px) * 50%  = 100px * 50% = 50px

y:(200px - 100px) * 50%  = 100px * 50% = 50px

得到的结果与上例相同,限于篇幅,就不再截图了。当然,百分比的值也可以是负值,计算公式依然不变。还是上面的例子,把百分比改为 -50% -50%。此时,得到背景图像起始位置的坐标为:

x:(200px - 100px) * (-50%) = 100px * (-50%) = -50px

y:(200px - 100px) * (-50%) = 100px * (-50%) = -50px

运行结果如图 4‑29 所示:

背景图像百分比定位

图4-29 背景图像百分比定位

从上图可以看出,此时的背景图像只显示了原本图像的 1/4,这是因为背景图像的起始位置向左、向上移动后,只有1/4 的图案落到了背景区域。由于背景被设置为不重复,所以,就只显示了原本图像的 1/4。

3)x y:表示使用长度值定位,是将背景图像的左上角,放置在对象的背景区域中(x, y)所指定的位置,即 x, y 定义的是背景图像的左上角,相对于背景区域左上角的偏移量。

偏移量长度可以是正值,也可以是负值。x 为正值表示向右偏移,负值表示向左偏移;y 为正值表示向下偏移,负值表示向上偏移。背景图像发生移动后,就有可能超出对象的背景区域。此时,超出的部分将不会显示,只会显示落入背景区域的部分。

如果把上面的例子改为长度值定位,要使背景图像居中,只需把背景图像的位置设置为50px 50px 即可。它就表示背景图像的左上角顶点,相对于对象背景区域的左上角顶点在 x轴右移 50px,在 y 轴下移 50px。得到的结果依然是背景图像位于对象的中央。

CSS3中,background-position属性支持 4 个参数值,前两个值用于横坐标,后两个值用于纵坐标。这意味着我们可以相对于上左下右任意一个角落定位,而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。

如果只提供一个值,则第二个值为center。如果提供两个值,第一个长度或百分比表示水平偏移,第二个长度或百分比表示垂直偏移。长度或百分比,表示背景图像的左上角相对于背景位置区域左上角的偏移。如,下面几个声明给出了背景的起点相对于背景区域左上角的偏移:



  1. background-position: left 10px top 15px;   /* 10px, 15px */
    background-position: left     top     ;    /*  0px,  0px */
    background-position:    10px    15px;      /* 10px, 15px */
    background-position: left         15px;    /*  0px, 15px */
    background-position:    10px top     ;     /* 10px,  0px */
    background-position: left      top 15px;   /*  0px, 15px */
    background-position: left 10px top     ;   /* 10px,  0px */


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (263人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------