微信小程序 本地背景图片设置

1、背景图片设置可以用服务器上的图片。

2、也可以将本地图片转成base64的。

wxml:

<view class="topview-left" style="background-image: url({{background}})mode='scaleToFill'"/>

js:

data: {

    background: "肢山判/style/images/icon_coupon_backgroud.png",

  },

/**

  * 生命周期函数--监听页面加载

  */

  onLoad: function(options) {

    //设置背景图片

    let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64')

    this.setData({

      'background': 'data:image/pngbase64,' + base64

    })

    //设置导航栏标题

    wx.setNavigationBarTitle({

      title: '下发优惠券'

    })

  },

wxss:

.topview-left {

  display: flex

  flex-direction: column

  align-items: center

  justify-content: center

  width: 30%

  height: 113px

  background-repeat: no-repeat/** 不重复*/

  background-size: 100% 100%

  background-image: url('data:image/pngbase64,base64码')/** 添加背景图片的*/

}

3、也可以直接设置定位实现。

         <view style="display: flexalign-items: centertext-align:centerjustify-content: centermargin-bottom:10px">

               <image src="/pagesChronic/images/icon_case_background.png" style="height:26pxwidth:167pxposition:absolute"></image>

           历改     <text style="position: relativecolor:#FF9721">评价</text>唯轮

           </view>

效果：

加时钟的话，就闷唤我的经验，只能把时钟的swf地址加到背景音乐里，占一个屏幕

我以前试过放毁罩族在主体或者头部是不行的，那些时钟代码要html语言，这个百度css模板就不支持了

但是放在背景音乐里，只需要地址就可以了

http://www.clocklink.com/ENG/gallery.htm

这个是国外博客们经常用的时钟网站

天气预报有的，主要就是加一个天气预报的地址

把这段代码覆盖#header div.lc这条

#header div.lc{height:150pxwidth:150pxtop:300pxbackground:url(http://firetear.com/weather/weather.aspx) no-repeat left topfilter:chroma(color=#FFFFFF)chroma(color=#b9b9b9)}

你想纤弊换地方也可以试试，凡是有background的地方应该都可以放

就是这个地址http://firetear.com/weather/weather.aspx

背景图片不笑戚循环显示，定位在xy坐标的（0,100%）位置上，（0,100%）中的100%是随着笑锋DIV的高度一直显示在底部，与碰升陵“no-repeat left bottom”同等意思

---