您的位置:首页 > Web前端 > css > 正文

background-position的使用

更多 时间:2015-7-2 类别:Web前端 浏览量:1622

background-position的使用

background-position的使用

一、background-position可能的值

 

描述

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0% 0%。

x% y%

第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值,另一个值将是 50%。

xpos ypos

 

第一个值是水平位置,第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值,另一个值将是50%。

您可以混合使用 % 和 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;
        }

     

    标签:css
    您可能感兴趣