微信小程序 - 開發總結(3): 背景圖、背景色(主要是透明度)的設置

在寫小程序之前以為小程序的背景圖、背景色設置方式和網頁寫法是一樣的，但是當真寫的時候才發現它兩爺子有很多不一樣。

具體怎么個不一樣法，下面開始列舉。

一、用 background-image 或 background 設置背景圖，常規網頁既可以是本地圖片，也可以網絡圖片，還可以Base64圖片編碼；但小程序卻只能使用網絡圖片和Base64圖片編碼，不能使用本地圖片。

　　1、用 background-image 設置網頁背景圖：

.bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  /*本地圖片*/
  background-image: url('./../../assets/images/login-bg.jpg');
  /*網絡圖片*/
  /*background-image: url('https://img2.baidu.com/it/u=3638522699,2877105073&fm=26&fmt=auto&gp=0.jpg');*/
  /*Base64位圖片編碼*/
  /*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAjCAIAAAAYI7NnAAABiUlEQVR42u2ZwRKDIAxE/f+fpodOrQqEzSZAFDMenMoEeCRZoFt6jbXtRfCyi8pu+xnY0t5m0OTrNpod0n0ccDI7KFB6sMtHFpxdDeggdvKiERkxBZwuVuw9aRM2CMEo7PZPqmI3l+Od2O1fvs/h9+ODcZS93Ijd8ZOK3Znaf9btoSNe2Bk56ywCBRlQcabCrKtJrfJCsfM8V4Cr1FL9a7gw5cniBdudOJ/JwFVqISbio56wBi/GE4UDu9rWt7YfzmWBUdjchd7PUHYCKbxZMVbU465EnO44Ja66c72j2Z3fG3kGjR7IVnwnT4usiR24OZKDTj1/VkyRotxrj8KxO7+TxX3LddqmrZPZgX2rElZV7CzHOBnf89lZjsPFzGhu733YcRcq7uwcRZaT2oewcxFZvCaq2XGX74PBWURWbl+I067sxgcdcZDAY+3SZhV2IESdn/G3tSmSWe6up112p3jW6w5qHYJ4MIb4syoFNjedXZagg84uJSPhdPYZARgoZ++awsGLS2R2H86IsznEJ9uOAAAAAElFTkSuQmCC');*/
  background-size: 280px 200px;
  background-position: 50% 50%;
  background-repeat: no-repeat no-repeat;
}

(本地圖片)，(網絡圖片)，(Base64位圖片編碼)

　　2、用 background 設置網頁背景圖：

.bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  /*本地圖片*/
  background: url('./../../assets/images/login-bg.jpg');
  /*網絡圖片*/
  /*background: url('https://img2.baidu.com/it/u=3638522699,2877105073&fm=26&fmt=auto&gp=0.jpg');*/
  /*Base64位圖片編碼*/
  /*background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAjCAIAAAAYI7NnAAABiUlEQVR42u2ZwRKDIAxE/f+fpodOrQqEzSZAFDMenMoEeCRZoFt6jbXtRfCyi8pu+xnY0t5m0OTrNpod0n0ccDI7KFB6sMtHFpxdDeggdvKiERkxBZwuVuw9aRM2CMEo7PZPqmI3l+Od2O1fvs/h9+ODcZS93Ijd8ZOK3Znaf9btoSNe2Bk56ywCBRlQcabCrKtJrfJCsfM8V4Cr1FL9a7gw5cniBdudOJ/JwFVqISbio56wBi/GE4UDu9rWt7YfzmWBUdjchd7PUHYCKbxZMVbU465EnO44Ja66c72j2Z3fG3kGjR7IVnwnT4usiR24OZKDTj1/VkyRotxrj8KxO7+TxX3LddqmrZPZgX2rElZV7CzHOBnf89lZjsPFzGhu733YcRcq7uwcRZaT2oewcxFZvCaq2XGX74PBWURWbl+I067sxgcdcZDAY+3SZhV2IESdn/G3tSmSWe6up112p3jW6w5qHYJ4MIb4syoFNjedXZagg84uJSPhdPYZARgoZ++awsGLS2R2H86IsznEJ9uOAAAAAElFTkSuQmCC');*/
  background-size: 280px 200px;
  background-position: 50% 50%;
  background-repeat: no-repeat no-repeat;
}

(本地圖片)，(網絡圖片)，(Base64位圖片編碼)

　　3、用 background-image 設置小程序背景圖：

.head-bg {
    width: 100%;
    height: 300rpx;
    /*本地圖片*/
    background-image: url('../../../assets/images/mine-bg.png');
    /*網絡圖片*/
    /* background-image: url('https://img2.baidu.com/it/u=3638522699,2877105073&fm=26&fmt=auto&gp=0.jpg'); */
    /*Base64位圖片編碼*/
    /* background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAjCAIAAAAYI7NnAAABiUlEQVR42u2ZwRKDIAxE/f+fpodOrQqEzSZAFDMenMoEeCRZoFt6jbXtRfCyi8pu+xnY0t5m0OTrNpod0n0ccDI7KFB6sMtHFpxdDeggdvKiERkxBZwuVuw9aRM2CMEo7PZPqmI3l+Od2O1fvs/h9+ODcZS93Ijd8ZOK3Znaf9btoSNe2Bk56ywCBRlQcabCrKtJrfJCsfM8V4Cr1FL9a7gw5cniBdudOJ/JwFVqISbio56wBi/GE4UDu9rWt7YfzmWBUdjchd7PUHYCKbxZMVbU465EnO44Ja66c72j2Z3fG3kGjR7IVnwnT4usiR24OZKDTj1/VkyRotxrj8KxO7+TxX3LddqmrZPZgX2rElZV7CzHOBnf89lZjsPFzGhu733YcRcq7uwcRZaT2oewcxFZvCaq2XGX74PBWURWbl+I067sxgcdcZDAY+3SZhV2IESdn/G3tSmSWe6up112p3jW6w5qHYJ4MIb4syoFNjedXZagg84uJSPhdPYZARgoZ++awsGLS2R2H86IsznEJ9uOAAAAAElFTkSuQmCC'); */
    background-repeat: no-repeat no-repeat;
    background-size: 100% 300rpx;
}

(本地圖片顯示不出來)，(網絡圖)，(Base64位圖片編碼)

　　4、用 background 設置小程序背景圖：

.head-bg {
    width: 100%;
    height: 300rpx;
    /*本地圖片*/
    background: url('../../../assets/images/mine-bg.png');
    /*網絡圖片*/
    /* background: url('https://img2.baidu.com/it/u=3638522699,2877105073&fm=26&fmt=auto&gp=0.jpg'); */
    /*Base64位圖片編碼*/
    /* background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAjCAIAAAAYI7NnAAABiUlEQVR42u2ZwRKDIAxE/f+fpodOrQqEzSZAFDMenMoEeCRZoFt6jbXtRfCyi8pu+xnY0t5m0OTrNpod0n0ccDI7KFB6sMtHFpxdDeggdvKiERkxBZwuVuw9aRM2CMEo7PZPqmI3l+Od2O1fvs/h9+ODcZS93Ijd8ZOK3Znaf9btoSNe2Bk56ywCBRlQcabCrKtJrfJCsfM8V4Cr1FL9a7gw5cniBdudOJ/JwFVqISbio56wBi/GE4UDu9rWt7YfzmWBUdjchd7PUHYCKbxZMVbU465EnO44Ja66c72j2Z3fG3kGjR7IVnwnT4usiR24OZKDTj1/VkyRotxrj8KxO7+TxX3LddqmrZPZgX2rElZV7CzHOBnf89lZjsPFzGhu733YcRcq7uwcRZaT2oewcxFZvCaq2XGX74PBWURWbl+I067sxgcdcZDAY+3SZhV2IESdn/G3tSmSWe6up112p3jW6w5qHYJ4MIb4syoFNjedXZagg84uJSPhdPYZARgoZ++awsGLS2R2H86IsznEJ9uOAAAAAElFTkSuQmCC'); */
    background-size: 100% 300rpx;
    background-repeat: no-repeat no-repeat;
}

(本地圖片顯示不出來)，(網絡圖)，(Base64位圖片編碼)

　　雖然 background-image 或 background 可以把網絡圖片、Base64圖片編碼設置成背景圖，但實際開發中可能使用本地圖片的時候更多一些，總不能讓運維每次部署好新環境后，都去把這些圖片初始化一次。而且還可能有些系統壓根不需要圖片存儲和返顯，有些小程序壓根不需要上傳和下載圖片，那這種情況下，總不能為了這幾張背景圖，單獨開辟一個圖片的存儲位置和鏈接配置，當然這種情況可以用阿里雲或者七牛雲等穩定服務器進行圖片的存儲和鏈接獲取，但這些都是要錢錢的，所以最終還是要解決本地圖片如何設置成背景圖的問題。

　　5，既然小程序無法用 background-image 或 background 將本地圖片設置為背景圖，那怎么辦呢，另辟蹊徑，用 image 標簽設置背景圖。

　　用 image 標簽設置背景圖，咋個整。 由於 image 標簽加載出的圖片本身在DOM(小程序沒有DOM，這里只是借用DOM的概念說明下)結構中是占有位置的，其他DOM節點在正常情況下，是按照從左至右，從上往下排列渲染。所以，如果要用這張圖作為背景圖，那用它做背景圖的DOM節點就需要脫離其原本的文檔流位置，即用相對定位使得這個DOM節點覆蓋在 image 標簽的圖片上，從而讓這張圖片成為背景圖。具體操作如下：

　　界面結構：

<view class="head-w flex-layout">
    <image class="head-bg" src="../../../assets/images/mine-bg.png"></image>　　<!-- 背景圖 -->
    <view class="head-avatar-w">
        <view class="text-align-c">
            <image class="head-avatar" src="{{mineInfo.img}}" alt="頭像"></image>
        </view>
        <view class="mt5 line-height21 font-size20 color-222222 text-align-c">大秦帝國</view>
    </view>
</view>

　　當然  image標簽不僅可以加載本地圖片，還可以加載網絡圖片，和Base64圖片編碼。

<!-- 網絡圖片背景圖 -->
<image class="head-bg" src='https://img2.baidu.com/it/u=3638522699,2877105073&fm=26&fmt=auto&gp=0.jpg'></image>

<!-- Base64圖片編碼 背景圖 -->
<image class="head-bg" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAAAjCAIAAAAYI7NnAAABiUlEQVR42u2ZwRKDIAxE/f+fpodOrQqEzSZAFDMenMoEeCRZoFt6jbXtRfCyi8pu+xnY0t5m0OTrNpod0n0ccDI7KFB6sMtHFpxdDeggdvKiERkxBZwuVuw9aRM2CMEo7PZPqmI3l+Od2O1fvs/h9+ODcZS93Ijd8ZOK3Znaf9btoSNe2Bk56ywCBRlQcabCrKtJrfJCsfM8V4Cr1FL9a7gw5cniBdudOJ/JwFVqISbio56wBi/GE4UDu9rWt7YfzmWBUdjchd7PUHYCKbxZMVbU465EnO44Ja66c72j2Z3fG3kGjR7IVnwnT4usiR24OZKDTj1/VkyRotxrj8KxO7+TxX3LddqmrZPZgX2rElZV7CzHOBnf89lZjsPFzGhu733YcRcq7uwcRZaT2oewcxFZvCaq2XGX74PBWURWbl+I067sxgcdcZDAY+3SZhV2IESdn/G3tSmSWe6up112p3jW6w5qHYJ4MIb4syoFNjedXZagg84uJSPhdPYZARgoZ++awsGLS2R2H86IsznEJ9uOAAAAAElFTkSuQmCC'></image>

　　wxss樣式：

.head-w,
.head-bg {
    width: 100%;
    height: 300rpx;
}

.head-avatar-w {
    position: absolute;
    top: 60rpx;
    width: 100%;
    z-index: 1;
}

(本地圖片)，(網絡圖片)，(Base64位圖片編碼)

二、背景色透明度的設置