电脑技术学习

background-position说明

dn001

background-position的说明:
;设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。
;默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
;如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
;如果设置值为 right center,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition 。

语法:
;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-pos y-pos

初始值: 0% 0%
;继承性: 否
;适用于: 所有元素
;background:背景.position:位置.

重点讲解的地方:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xhtml" lang="UTF-8">
<head>
<title>背景图片的定位background-position的问题</title>
<style type="text/CSS">
<!--
*{
margin:0;
padding:0;
}
body {
text-align:center;
background:#000;
}
#container{
width:1000px;
margin:0 auto;
background:#fff url(images/bg.jpg) no-repeat left top;
height:500px;
}
-->
</style>
</head>
<body>
<div id="container"> </div>
</body>
</HTML>

标签: