微信小程序 - 开发总结(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位图片编码)

二、背景色透明度的设置