Web速查-索引

Alt text

定义

background-position 属性设置背景图像的起始位置。

注意:这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 中正常工作。

语法

background-position:A|B|C;

属性值

说明
A(top、left、right、bottom、center)两两组合 如果仅规定了一个关键词,那么第二个值将是”center”。默认值:0% 0%。
B(x% y%) 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另一个值将是 50%。
C(xpos ypos) 第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值,另一个值将是50%。可以混合使用 % 和 position 值。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style type="text/css">
body
{
background-image:url(../img/logo.png);
background-repeat:no-repeat;
background-attachment:fixed;
/*只设置一个值,默认第二个为center*/
background-position:center;
}
</style>
</head>
<body>
<p><b>提示:</b>需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 中正常工作。</p>
</body>
</html>

提示:需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 中正常工作。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
3.0 3.0 3.0 9.0