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經典算法題，帶詳細講解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。