三级全黄做爰电影_夫妻之间那些事_啊啊啊啊好爽视频_国产精品xxxx喷水欧美_色一情一乱一伦麻豆_国产精品美乳一区二区免费_亚洲综合av在线在线播放_人与禽伦性了_黄色软件色多多_av在线免费观看网址

在微信小程序當(dāng)我們使用本地圖片作為背景圖片的時候我們會遇到以下問題

先看代碼：

wxml:

<view class="login-box">

</view>

wxss:

.login-box{

  width: 650rpx;

  height: 700rpx;

  background-image: url(../../image/auth-default.png);

}

開發(fā)HTML前端的UI的時候，這種是最常用的設(shè)計方法，但是在微信小程序里卻會報錯：

[渲染層網(wǎng)絡(luò)層錯誤]中的本地資源圖片無法通過 WXSS 獲取，可以使用網(wǎng)絡(luò)圖片，或者 base64，或者使用<image/>標(biāo)簽。

如下圖：

解決方案

小程序背景圖片無法直接使用本地圖片。有幾種解決方案：

使用image組件，在布局中使用多層定位。缺點：布局結(jié)構(gòu)可讀性不高。

將圖片通過在線轉(zhuǎn)化網(wǎng)站，轉(zhuǎn)化成base64格式。缺點：base64內(nèi)容太長了，影響樣式代碼閱讀。

 直接通過把樣式直接寫入WXML文件里。缺點：代碼看上去不夠優(yōu)雅。（最簡單）

 直接使用網(wǎng)絡(luò)圖片。缺點：需要放到服務(wù)器上。（最靈活）

建議使用第4種方法解決，雖然首次操作會有點麻煩，但是這樣可以增加靈活度后續(xù)可以不發(fā)版本直接替換遠(yuǎn)程圖片。

但使用網(wǎng)絡(luò)圖片的也存在問題，如項目批量運(yùn)營的，在wxss是不能指定動態(tài)域名的，如把圖片資源統(tǒng)一放在一臺服務(wù)器，這樣非常靈活但是唯一不足就是會這臺服務(wù)器的運(yùn)行壓力。

當(dāng)然也可以放在云托管，這樣也和放在服務(wù)器一樣靈活。

云托管是在微信開發(fā)工具進(jìn)入的，如下圖：

把樣式直接寫進(jìn)WXML里實現(xiàn)方法

當(dāng)然如果實際業(yè)務(wù)需求沒有替換圖片的需求也可以使用第3個方案，這個是最省事的方案。

wxml代碼：

<view class="login-box" style="background-image: url(../../image/auth-default.png);background-size: 100% 100%;">

</view>

wxss代碼：

.login-box{

  width: 650rpx;

  height: 700rpx;

  margin: 0 auto;

}

效果圖：

像這種不是通用性多的樣式，這樣寫法其實也沒什么，也不會造成什么代碼冗余，只是看起來不太美觀。

Base64編碼格式

Base64編碼格式，先將圖片轉(zhuǎn)化成base64編碼。點擊傳送到base64圖片在線轉(zhuǎn)換工具

background-image:url('base64編碼');

這種占用代碼量非常大，小程序本身有文檔大小限制，所以盡量不采用這種方法了。

用多層定位，圖片通過z-index放在最底層

第1個方案，用內(nèi)容覆蓋圖片

wxml代碼：

<view class="container">

  <image src='../image/auth-default.png' class="bgimages"></image>

  <view class='content'>

    點擊按鈕

  </view>

</view>

wxss代碼：

.container{

  width: 100%;

  height: 600rpx;

  margin: 0;

  padding: 0;

  position: relative;

}

.bgimages{

  position: absolute;

  width: 100%;

  height: 600rpx;

}

.content{

  position: absolute;

  z-index: 1;

}

好了，關(guān)于微信小程序背景圖片的分析就寫到這了。