2013-08-01css3背景(四)—background-position

    您现在的位置是:首页 > 学无止境 > CSS3|Html5

    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

关键字词:css3,css3背景,background-position