background-position 我的理解

时间 2019-11-21

原文原文链接

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来使图片居中css

<!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>

1. 火狐不支持backgroundPosition的js插件
2. 最新版 chrome 33中,backgroundPosition 改了.
3. 我理解的ES6
4. SpringMVC我的理解
5. 我理解的docker
6. 我理解的MVC
7. 我理解的BOOST
8. 我的HTTPS理解
9. IOC我的理解
10. LDAP我的理解
更多相关文章...
• MyBatis的工作原理 - MyBatis教程
• ARP协议的工作机制详解 - TCP/IP教程
• Docker 清理命令
• 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解