這兩天開發(fā)微信小程序，在設(shè)置背景圖片時，發(fā)現(xiàn)在wxss里面設(shè)置 background-image:(url) 屬性，不管是開發(fā)工具還是線上都無法顯示。經(jīng)過查資料發(fā)現(xiàn)，background-image 只能用網(wǎng)絡(luò)url或者base64圖片編碼 ，
本地圖片只能用 image標(biāo)簽src屬性才行。當(dāng)然 image標(biāo)簽src屬性也可以使用網(wǎng)絡(luò)url或者base64圖片編碼。
下面通過 image 標(biāo)簽src屬性設(shè)置，實現(xiàn)背景圖顯示
界面結(jié)構(gòu)：
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;} |
顯示結(jié)果：
