微信小程序背景圖片顯示不出來

開發小程序的時候，設置頁面的背景，用到css代碼：

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

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

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

解決方法：

下面通過 image 標簽src屬性設置，實現背景圖顯示

界面結構：

<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; }

推薦：《小程序開發教程》