• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 462|回復: 0
      上一主題 下一主題

      background-position百分比原理詳解

      80292

      主題

      0

      好友

      積分

      離線 發信

      跳轉到指定樓層
      樓主
      發表于 2021-07-25 19:58 | 只看該作者 | 倒序瀏覽

      今天幫別人調代碼時,看到一個樣式:

      background-position: 50% 0;
      background-size: 100% auto;

      對background-size:100% auto,意思是背景圖片寬度為元素寬度*100%,高度等比縮放。詳情可見css3 background。

      對background-position很自然的以為百分比是根據父元素寬度計算的,但background-position真的不是,它有一套自己的原理。下面詳細介紹。

      一、等價寫法

      在看各類教程時有以下等價寫法:

      • top left, left top 等價于 0% 0%.
      • top, top center, center top 等價于 50% 0%.
      • right top, top right 等價于 100% 0%.
      • left, left center, center left 等價于 0% 50%.
      • center, center center 等價于 50% 50%.
      • right, right center, center right 等價于 100% 50%.
      • bottom left, left bottom 等價于 0% 100%.
      • bottom, bottom center, center bottom 等價于 50% 100%.
      • bottom right, right bottom 等價于 100% 100%.

      那么為什么left,top就等價于0% 0%,right bottom等價于100% 100%呢?

      二、background-position百分比計算公式

      background-postion:x y;
      x:{容器(container)的寬度—背景圖片的寬度}*x百分比,超出的部分隱藏。
      y:{容器(container)的高度—背景圖片的高度}*y百分比,超出的部分隱藏。

      有了這個公式,就很容易理解百分百寫法了,推算一下也就很容易理解上面各類等價寫法了。

      三、舉例

      1、background-position:center center等價于background-position:50% 50%等價于background-position:?px ?px

      例子中用到背景圖如下【尺寸:200px*200px】:

      背景圖在容器中居中。

      <style type="text/css">
      .wrap{
          width: 300px;
          height: 300px;
          border:1px solid green;
          background-image: url(img/image.png);
          background-repeat: no-repeat;
      /*    background-position: 50% 50%;*/
          background-position: center center;
      }
      </style>
      <div class="wrap">
      </div>

      效果都是讓背景圖片居中

      如上通過設置百分比和關鍵字能實現背景圖居中,如果要實現通過具體值來設置圖片居中該設置多少?

      根據上面公式:

      x=(容器的寬度-背景圖寬度)*x百分比=(300px-200px)*50%=50px;

      y=(容器的高度-背景圖高度)*y百分比=(300px-200px)*50%=50px;

      即設置background-postion:50px 50px;

      測試一下:

      <style type="text/css">
      .wrap{
          width: 300px;
          height: 300px;
          border:1px solid green;
          background-image: url(img/image.png);
          background-repeat: no-repeat;
      /*    background-position: 50% 50%;*/
      /*    background-position: center center;*/
          background-position: 50px 50px;
      }
      </style>
      <div class="wrap">
      </div>

      效果同樣居中。

      到此這篇關于background-position百分比原理詳解的文章就介紹到這了,更多相關background-position 百分比內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      來源:http://www.jb51.net/css/774553.html