background-position的使用

background-position的使用

一、background-position可能的值

二、background-position赋值时的等价写法

1、top left, left top 等价于 0% 0%.

2、top, top center, center top 等价于 50% 0%.

3、right top, top right 等价于 100% 0%.

4、left, left center, center left 等价于 0% 50%.

5、center, center center 等价于 50% 50%.

6、right, right center, center right 等价于 100% 50%.

7、bottom left, left bottom 等价于 0% 100%.

8、bottom, bottom center, center bottom 等价于 50% 100%.

9、bottom right, right bottom 等价于 100% 100%.

三、背景图像定位中我们要明确的几点

1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。

    如果只有一个值，那默认的就是x轴方向，

    这时y轴方向就默认的是上下居中对齐，也就是center。

2、坐标轴的原点就是对应容器的左顶点。

3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。

4、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。

5、x y的值可以用百分比或者px来表示。

6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示，

    但注意：用“left、right、top、bottom、center”来表示的时候，应用的是对齐规则，而不是坐标规则。

    x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，

    y为top的时候表示图片的顶部和容器的顶部对齐，

    为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐。

7、x y用百分比或者px表示的时候，其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义，

    x为负数时候表示图片左顶点在容器左顶点的左侧，

    y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。

四、background-position实例

1、background-position:0 0

背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。

    .container{...}{
         width:300px;
         height:150px;
         background:transparent url(bg.jpg) no-repeat scroll 0 0;
         border:5px solid green;
     }

		

2、background-position属性定位不受对象的补丁属性( padding )设置影响

例如，我们给容器元素增加padding值，背景图片的左上角还是与容器元素的左上角对齐。在此处只是影响到了容器元素的高度和宽度。

    .container{...}{
         width:300px;
         height:150px;
         background:transparent url(bg.jpg) no-repeat scroll 0 0;
         border:5px solid green;
         padding:50px;
     }

		

3、background-position:-70px -40px;

图片以容器左上角为参考向左偏移70px，向上偏移 40px，示例：

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll -70px -40px;
        border:5px solid green;
    }

4、background-position:70px 40px;

图片以容器左上角为参考向右偏移70px，向下偏移 40px，示例：

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 70px 40px;
        border:5px solid green;
    }

5、background-position:50% 50%;

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

 例如： .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
        border:5px solid green;
    }

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

由于超出部分别往两端延伸，所以我们可以先制作一张宽度足够宽图片设置水平值为50%，这样可以用来适应不同的浏览器，使得图片水平充满浏览器窗口并且居中。替代margin:50 auto的功能。

6、background-position:-50% -50%;

等同于x：-{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：-{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll -50% -50%;
        border:5px solid green;
    }

7、background-position:100% 100%;

图片处于容器元素的右下角，与 background-position:right bottom;效果等同。

示例：

    .container{
        width:300px;
        height:150px;
        background:transparent url(bg.jpg) no-repeat scroll 100% 100%;
        border:5px solid green;
    }