亚洲免费在线观看_av网站免费观看_亚洲视频中文字幕_日本视频在线_香蕉一区二区_国产精品中文_这里只有精品久久_欧美一区二区三区不卡_日本高清在线观看_国产精品免费一区二区三区都可以_欧美黄色大片视频_自拍偷拍第1页_亚洲啪av永久无码精品放毛片_三级免费观看_日日狠狠_波多野结衣绝顶大高潮_国语一级片_亚洲丁香婷婷

027-81331413

微信小程序設置背景圖片

發布時間：2020-11-09 瀏覽：2972

這兩天開發微信小程序，在設置背景圖片時，發現在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;
}

　　顯示結果：