5.4. CSS background-position 属性

background-position -- 定义背景图片的位置
  • 取值: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
    • 水平
      • left: 左
      • center: 中
      • right: 右
    • 垂直
      • top: 上
      • center: 中
      • bottom: 下
    • 垂直与水平的组合
      • x-% y-%
      • x-pos y-pos
    • inherit: 继承
  • 引用网址:http://www.dreamdu.com/css/property_background-position/
  • 初始值: 0% 0%
  • 继承性: 否
  • 适用于: 所有元素
  • background:背景.position:位置.

示例

body 
{ 
	background-image:url('list-orange.png');
	background-repeat:no-repeat;
}

p 
{ 
	background-image:url('list-orange.png');
	background-position:right bottom ;
	background-repeat:no-repeat;
}

div 
{ 
	background-image:url('list-orange.png');
	background-position:50% 20% ;
	background-repeat:no-repeat;
}

屏幕左上角显示一个橙色点.p段落的右下角显示一个橙色点.div中间偏上显示一个橙色点.

说明

background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.

例如:

<percentage> <percentage>

左上角为0%, 0%. 右下角为100%, 100%.例如58%,56%就是从左上角算起,右移58%,下移56%.

<length> <length>

6cm 8cm,从左上角算起,右移6cm,下移8cm.

下面是一些等式

  • top left, left top 等价于 0% 0%.
  • top, top center, center top 等价于 50% 0%.
  • right top, top right 等价于 100% 0%.
  • left, left center, center left 等价于 0% 50%.
  • center, center center 等价于 50% 50%.
  • right, right center, center right 等价于 100% 50%.
  • bottom left, left bottom 等价于 0% 100%.
  • bottom, bottom center, center bottom 等价于 50% 100%.
  • bottom right, right bottom 等价于 100% 100%.

CSS background-position 属性示例 -- 可以尝试编辑



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都