快應(yīng)用 背景圖樣式

當(dāng)需要往頁面組件內(nèi)添加一個圖片作為組件背景的時候，開發(fā)者可以對這個圖片背景的大小、重復(fù)放置的模式、放置位置進(jìn)行調(diào)整，也可以直接添加能自適應(yīng)的 9-patch 圖片。

background-size 屬性

該屬性定義了背景圖片的大小。

參數(shù)的個數(shù)可以是一個或兩個。

有效參數(shù)列表如下：

當(dāng)參數(shù)為兩個的時候，第一個參數(shù)默認(rèn)解析為水平軸的寬，第二個參數(shù)默認(rèn)解析為豎直軸的高，如果只有一個參數(shù)，則將?auto?補充為第二個參數(shù)，然后按照雙參數(shù)的規(guī)則解析。

無效參數(shù)統(tǒng)一解析為默認(rèn)值?auto?，即原圖尺寸。

background-repeat 屬性

該屬性定義了背景圖片在組件中的重復(fù)方式，背景圖片可以沿著水平軸、豎直軸、兩個軸重復(fù)，或者不重復(fù)。

參數(shù)的個數(shù)為一個。

有效參數(shù)列表如下：

無效參數(shù)會被解析為默認(rèn)值，即repeat。

示例

<div class="container">
  <div class="img"></div>
</div>

<style>
  .container {
    width: 365px;
    height: 365px;
    background-color: #c7c7c7;
  }
  .img {
    width: 100%;
    height: 100%;
    background-image: url('../Common/logo.png');
    /* 等比例縮放背景圖片到寬度為組件寬的一半 */
    background-size: 50%;
    /* 在水平方向和豎直方向上重復(fù)繪制 */
    background-repeat: repeat;
    /* 背景圖片處于組件中央 */
    background-position: center;
  }
</style>

.img {
  width: 100%;
  height: 100%;
  background-image: url('../Common/logo.png');
  /* 等比例縮放背景圖片到寬度為100px */
  background-size: 100px;
  /* 背景圖片不重復(fù)繪制 */
  background-repeat: no-repeat;
  /* 背景圖片距離組件左邊緣20px，和上下邊緣的距離比為3:7 */
  background-position: left 20px top 30%;
}

background-position 屬性

該屬性定義了背景圖片在組件中的位置。

屬性參數(shù)的個數(shù)可以是 1-4 個。

使用參數(shù)描述某個軸方向的位置，有如下兩種方式：

第一種方式：位置標(biāo)識 + 具體數(shù)值

位置標(biāo)識作用是解釋后面的具體數(shù)值參數(shù)表示的位置，這里指的是位置標(biāo)識對應(yīng)邊緣的相對位置，具體為left、right、top、bottom其中之一。

具體數(shù)值指的是以 px 和%結(jié)尾的具體數(shù)值，即<length>和<percent>類型。

為了方便理解，舉兩個具體的例子進(jìn)行說明，如下表：

第二種方式：位置參數(shù)

位置參數(shù)表示一個具體的位置信息，具體為?<length>?、?<percent>?、?left?、?right?、?top?、?bottom?、?center?其中之一，位置參數(shù)可以被解析為一個位置標(biāo)識加上一個具體數(shù)值，對應(yīng)關(guān)系如下表。

從參數(shù)的個數(shù)來看，可以將有效參數(shù)分為四個類型：

一個參數(shù)：（位置參數(shù)），解析的時候，將center添加到第二個參數(shù)，然后作為兩個參數(shù)解析。

兩個參數(shù)：（位置參數(shù)，位置參數(shù)），解析的時候，展開位置參數(shù)，擴展為四個參數(shù)解析。

三個參數(shù)：（位置參數(shù)，位置標(biāo)識，具體數(shù)值）或者（位置標(biāo)識，具體數(shù)值，位置參數(shù)），解析的時候，展開位置參數(shù)，擴展為四個參數(shù)解析。

四個參數(shù)：（位置標(biāo)識，具體數(shù)值，位置標(biāo)識，具體數(shù)值），需要注意的是，這兩個位置標(biāo)識不能表示同一個軸的方向。

無效參數(shù)全部解析為默認(rèn)值（0px, 0px）,即圖片顯示在組件的左上角。

background-position   示例代碼

查看 示例代碼

9-patch 圖支持 

9-patch 圖概念來自于 Android，這種圖片可以被自適應(yīng)拉伸，并且能夠自定義內(nèi)容在圖片中的展示區(qū)域位置。

background-image 屬性支持 9-patch 圖片，請確保提供名稱以”.9.png“結(jié)尾的標(biāo)準(zhǔn) 9-patch 圖。

圖片四周邊緣留有 1 像素的信息區(qū)域。信息區(qū)域底色為透明，黑色標(biāo)識區(qū)域信息，左邊緣和上邊緣標(biāo)識圖片的拉伸區(qū)域，右邊緣和下邊緣標(biāo)識圖片的內(nèi)容區(qū)域，設(shè)置及效果如下圖聊天氣泡樣例所示。

9-patch 圖的制作可以借助 Android Studio 來完成。

頁面元素額外設(shè)置的 padding 屬性，會覆蓋.9 圖攜帶的 padding 信息。

9-patch 圖會導(dǎo)致 background-size 和 background-repeat 屬性失效，因為 9-patch 圖會自適應(yīng)鋪滿組件。

9-patch   示例代碼

查看 示例代碼