開發(fā)小程序的時候，設(shè)置頁面的背景，用到css代碼：

.page__bd{     width: 100%;     height: 220px;     background: url('../../assets/img/images.jpg') no-repeat;     background-size: 100% 100%; }

在調(diào)試工具上是顯示的，但是掃面上傳到手機上卻顯示不出來。

這是由于：background-image 只能用網(wǎng)絡(luò)url或者base64圖片編碼 ， 本地圖片只能用 image標簽src屬性才行。當然 image標簽src屬性也可以使用網(wǎng)絡(luò)url或者base64圖片編碼。

解決方法：

下面通過 image 標簽src屬性設(shè)置，實現(xiàn)背景圖顯示

界面結(jié)構(gòu)：

<view class='set-background'>     <image class='background-image' src='{{item.countryPic}}'></image>     <view class='background-content'>         <view class="set-background-avatar" background-size="cover">             <image class="post-specific-image" src="{{item.picture}}"></image>         </view>     </view> </view>

wxss樣式：

.set-background {     display: flex;     flex-direction: column;     align-items: center;     height: 150px; } .set-background-avatar {     width: 220px;     height: 150px; } .background-content {     position: absolute;     z-index: 1; } .background-image {     width: 225px;     height: 150px;     opacity: 0.8; } .post-specific-image {     width: 215px;     height: 150px;     vertical-align: middle; }

推薦：《小程序開發(fā)教程》