您现在的位置是:首页 > 网站制作 > 前端设计

前端设计

css3背景(四)—background-position

杨青 2013-08-01前端设计

background-position 属性

说明:设置或检索对象的背景图像位置。必须先指定background-image属性。默认值:0% 0%,效果等同于left top

该属性提供2个参数值。

如果提供两个,第一个用于横坐标,第二个用于纵坐标。

如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。

兼容性:IE8及更早浏览器不支持CSS3 Background-position定义多组位置,只支持单组。

可能的值:

top left |  top center  |  top right  |  center left  |  center center  |  center right  |  bottom left  |  bottom center  |  bottom right  |  x% y%  | 

用法:

div{

background-image:url(/skin/blog/images/logo.jpg);

background-position:top left;

background-repeat:no-repeat;

}

实例

background-position:top left

background-position:top center

background-position:top right

background-position:center left

background-position:center center

background-position:center right

background-position:bottom left

background-position:bottom center

background-position:bottom right

x% y% 用%定位背景图片

说明:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%,右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%

示例

div{

background-image:url(/skin/blog/images/logo.jpg);

background-position:20% 30%;

background-repeat:no-repeat;

}

background-position:20% 30%

background-position:20%; 默认第二个值是50%

用像素px来定位背景图像

说明:第一个值是水平位置,第二个值是垂直位置。左上角是 0 0单位是0px 0px,如果您仅规定了一个值,另一个值将是 50%,可以混合使用% 和position值

示例

div{

background-image:url(/skin/blog/images/logo.jpg);

background-position:20px 100px;

background-repeat:no-repeat;

}

background-position:50px 30px

文章评论