CSS中background-position属性语法解析(1)

  本文向大家描述一下CSS中background-position属性的用法,该属性用来设置或检索对象的背景图像位置,必须先指定background-image属性,并且该属性定位不受对象的补丁属性(padding)设置影响。

  CSS中background-position属性说明:

  设置或检索对象的背景图像位置。必须先指定background-image属性。该属性定位不受对象的补丁属性(padding)设置影响。默认值为:0%0%。此时背景图片将被定位于对象不包括补丁(padding)的内容区域的左上角。

  如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。如果指定了两个值,第二个值将用于纵坐标。如果设置值为rightcenter,因为right作为横坐标值将会覆盖center值,所以背景图片将被居右定位。

  对应的脚本特性为background Position。

  ◆语法:

  background-position:length||length
  background-position:position||position

  ◆取值:

  length:百分数|由浮点数字和单位标识符组成的长度值。
  position:top|center|bottom|left|center|right

  background-position–定义背景图片的位置

  [<percentage>|<length>|left|center|right][<percentage>|<length>|top|center|bottom]]
  *水平
  left:左
  center:中
  right:右
  *垂直
  top:上
  center:中
  bottom:下
  *垂直与水平的组合
  x-%y-%
  x-posy-pos

  初始值:0%0%
  继承性:否
  适用于:所有元素

  background:背景.position:位置.

  一.background-position:lefttop;

  背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。
  等同于background-position:0,0;
  也等同于background-position:0%,0%;

  二.background-position:rightbottom;

  背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。
  等同于background-positon:100%,100%;
  也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

  三.background-position:500px15px;

  背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。

  四.background-position:-500px-15px;

  背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。

  五.background-position:50%50%;

  等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。
  等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。

  例如:

  background-position:50%50%;  

  就是

  background-position:(1000-2000)*50%px,(500-30)*50%px;  

  即back

  ground-position:-500px,235px;  

  也就是背景图片从容器(container)的左上角向左移500px,向下移235px;

  六.background-position:-50%-50%;

  等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。
  等同于right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。

  例如:

  background-position:-50%-50%;  

  就是

  background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;  

  即

  background-position:-250px,-70px;  

  也就是背景图片从容器(container)的左上角向左移250px,向上移70px

  详文参考:

CSS中background-position属性语法解析(1)

相关文章:

你感兴趣的文章:

标签云: