欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序開發(fā)背景圖顯示功能

 更新時間：2018年08月08日 08:42:29   作者：西嶺千秋雪  
這篇文章主要介紹了微信小程序開發(fā)--背景圖顯示,需要的朋友可以參考下

這兩天開發(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)：

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

　　顯示結(jié)果：

總結(jié)

以上所述是小編給大家介紹的微信小程序開發(fā)背景圖顯示功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論