网站制作之CSS中background-position 属性及其用法

↑上一篇:网站制作之标准DOM盒模型
↓下一篇:网站制作之CSS块元素和内联元素   

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: 继承
初始值: 0% 0%
继承性: 否
适用于: 所有元素
background:背景.position:位置.
注:background-position属性是CSS2.1提出的.IE6,Firefox1.5,Opera9支持此属性

示例
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.

广州网站制作 网站制作之CSS中background-position 属性及其用法 天传网络 http://www.snl.cn 

发布时间:2013-4-3  修改时间:2013-4-3  点击次数:  
↑上一篇:网站制作之标准DOM盒模型
↓下一篇:网站制作之CSS块元素和内联元素   
相关文章:
网友评论: