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

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

background-size 屬性

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

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

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

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

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

background-repeat 屬性

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

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

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

無(wú)效參數(shù)會(huì)被解析為默認(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ù)的個(gè)數(shù)可以是 1-4 個(gè)。

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

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

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

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

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

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

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

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

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

兩個(gè)參數(shù)：（位置參數(shù)，位置參數(shù)），解析的時(shí)候，展開(kāi)位置參數(shù)，擴(kuò)展為四個(gè)參數(shù)解析。

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

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

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

background-position   示例代碼

查看 示例代碼

9-patch 圖支持 

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

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

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

9-patch 圖的制作可以借助 Android Studio 來(lái)完成。

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

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

9-patch   示例代碼

查看 示例代碼