©
本文档使用
php中文网手册 发布
background-position：<position>[ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
默认值：0% 0%，效果等同于left top
适用于：所有元素
继承性：无
动画性：是
计算值：指定值
<percentage>：
用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
<length>：
用长度值指定背景图像填充的位置。可以为负值。
center：
背景图像横向和纵向居中。
left：
背景图像在横向上填充从左边开始。
right：
背景图像在横向上填充从右边开始。
top：
背景图像在纵向上填充从顶部开始。
bottom：
背景图像在纵向上填充从底部开始。
该属性提供2个参数值（CSS3中已允许提供3，4个值）。
如果提供三或四个，每个<percentage>或<length>偏移前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。
示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
缩写方式：
background:url(test1.jpg) no-repeat right 20px bottom 20px;
你也可以设置3个参数值：
拆分方式：
background:url(test1.jpg) no-repeat left bottom 10px;
要注意的是：设置3个或4个值，偏移量前必须有关键字。也就是说，形如："10px bottom 20px" ，这样的参数设置是错误的，因为10px前面没有关键字。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
对应的脚本特性为backgroundPosition。
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
灰色 = 未知
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome | Android UC |
|---|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+ | 7.0+ |
| 3-4个参数 以边界作参考偏移 | 6.0-8.0 | 2.0-12.0 | 4.0-24.0 | 3.1-6.1 | 3.2-6.1 | 2.1-4.3 | 18.0-24.0 | 7.0-9.9 | |
| 9.0+ | 13.0+ | 25.0+ | 7.0+ | 7.0+ | 4.4+ | 25.0+ |
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>background-repeat_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
border: 1px solid #000;
width: 400px;
height: 500px;
background-image: url(skin/p_103x196_1.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="test">背景图水平垂直居中</div>
</body>
</html>
点击 "运行实例" 按钮查看在线实例