這兩天開發微信小程序，在設置背景圖片時，發現在wxss里面設置 background-image:(url) 屬性，不管是開發工具還是線上都無法顯示。經過查資料發現，background-image 只能用網絡url或者base64圖片編碼 ，
本地圖片只能用 image標簽src屬性才行。當然 image標簽src屬性也可以使用網絡url或者base64圖片編碼。
下面通過 image 標簽src屬性設置，實現背景圖顯示
界面結構：
1 2 3 4 5 6 7 8 | <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樣式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .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;} |
顯示結果：
