background-position 个人理解

background-position
这里先说像素  百分比比较复杂
background-position:xxpx xxpx  这里第一个值指的是x轴坐标  第二个值是y轴坐标
这里使用的坐标系和数学中的坐标系不同   它大概是这样的
----------------->  x轴
|
|
|
|
|
|
|
|
V
y轴

先说说图片比div小得情况 http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position
此时移动的是图片
再说说几个特殊的值  x轴 left right center y轴 top bottom center
left和top相当于0px right和bottom相当于使图像到达边界的最大值 center就是使图像来到中间位置的值
所以可以用center center来使图片居中

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
    </head>
    <style type="text/css">
    .one{
        width: 500px;
        height: 800px;
        border: 1px solid black;
        background-image: url(http://s1.meituan.net/www/css/i/sp-header-new.vefe0f047.png);
        background-repeat: no-repeat;
        background-position: right bottom;/*使图片停靠在div的右下区域*/
        background-position: center center;/*图片在div的中间位置*/
        background-position: center top;/*横轴上 图片居中 纵轴上 图片靠顶*/
        background-position: 30px 50px;
    }

    .two{
        width: 43px;
        height: 40px;
        border: 1px solid black;
        background-image: url(http://s1.meituan.net/www/css/i/sp-header-new.vefe0f047.png);
        background-position: right bottom;/*和前面的规则一样 还是停留在右下区域  确切的说 使得图像的右下角 对齐于div的右下角*/
        /*另外一种理解的方式 先假设div区域很大 根据one里面那样对齐好图片之后 因为是停靠在右下区域
        抓住div的右下角不动  缩小div*/
        /*最好的理解方式是 尤其是对于div小于原始图片很多的时候  这里我们移动的是div  对于right bottom
        就是将div相对图片来说  移动到图片的右下角的位置*/
        background-position: center center;/*将div移动到相对于图片的中心位置*/
        background-position: center top;/*将div移动到相对于图片的x轴中间 y轴的顶部*/
        background-position: -43px -150px;
        /*根据书上的解释  我们说是图片左上角 相对于div左上角在x轴反向移动43px y轴反向移动150px*/
        /*或者使用我的理解方式  div相对于图片 x轴移动43px  y轴移动150px*/


    }
    </style>
    <body>
        当图片比div小的时候 这个x轴 y轴的数值表示的是图片左上角距离div左上角的距离
        <div class='one'></div>
        当图片比div大的时候 可以通过x轴 y轴设置负值来实现对图片的裁剪
        实际上就是控制图片位置  显示只需要显示的部分
        <div class='two'></div>
    </body>
</html>

 

posted @ 2014-03-13 21:36  cart55free99  阅读(284)  评论(0)  编辑  收藏  举报