這兩天開發微信小程序，在設置背景圖片時，發現在wxss里面設置 background-image:(url) 屬性，不管是開發工具還是線上都無法顯示。經過查資料發現，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;} 顯示結果：
總結
以上所述是小編給大家介紹的微信小程序開發背景圖顯示功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
