CSS background-position 属性
CSS background-position 属性
(html中不同背景使用同一张png图片 补充)
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: 下
- 垂直与水平的组合
- 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 属性示例 -- 可以尝试编辑
