微信小程序-背景图（附教程分享）

最新推荐文章于 2024-07-04 11:38:34 发布

benben0729

最新推荐文章于 2024-07-04 11:38:34 发布

阅读量5k

点赞数

文章标签：微信小程序背景图 style 本地图片资源无法通过wxss获取教程

本文链接：https://blog.csdn.net/benben0729/article/details/81568169

版权

微信专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在小程序开发过程中，尤其是针对像我这样的小白可能会遇到很多的坑，那就一个一个坑的跳，一个一个坑的填，在以后开发路可能就会平坦很多（但是很多时候，却又有些无奈）

解决方法：

1、使用网络图片

2、使用base64 http://imgbase64.duoshitong.com/

3、但是，我们一般在本地开发时，上面的解决方法并不是我们想要的结果，有时真的有点不理解小程序，在wxss文件中不允许设置本地图片作为背景图，但是在wxml标签属性中却可以，在标签中通过style属性设置背景图

<view class='contain' style='background-image:url("../../images/bg.jpg")' >
<view class='table' >
  <view class='tr bg-w'>
    <view class='th'>日期</view>
    <view class='th'>天气</view>
    <view class='th'>高温</view>
  </view>
  <block wx:for="{{weather.data.forecast}}" >
   <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      <view class='td'>{{item.date}}</view>
      <view class='td'>{{item.type}}</view>
      <view class='td'>{{item.high}}</view>
   </view>
   <view class='tr' wx:else>
      <view class='td'>{{item.date}}</view>
      <view class='td'>{{item.type}}</view>
      <view class='td'>{{item.high}}</view>
   </view>
   </block>
</view>
</view>

感谢刘明华先生的分享，好东西应该分享出来。

开发教程：https://pan.baidu.com/s/1yJieXrVZOlTe8i4KRPrJUQ?from=singlemessage&errno=0&errmsg=Auth%20Login%20Sucess&&bduss=&ssnerror=0&traceid=#list/path=%2F