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

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>

效果：

微信小程序设置没授权时的背景的方法：

1、 添加背景图（两步曲）

（1）、先在wxml里写一个块，块里包含一张图片即可，其实不加块也行，单独的一张图片就行了。

登录后复制

（2）、在wxss里，咱们定义这个图片的规格就行了，那个块里面的”content”可以不去做任何处理登录后复制

*解释：position据我的理解是，你要设置背景图，你肯定除了背景之外，还要有其他组件的，如果你就是想做个壁纸小程序的话，那你不用写这个，并且请你跳过后面的解释。

那这样，假如你有两个或多个组件，这里我们假设只有两个组件，第一个就是背景图，第二个也是个图片，这有两张图片，那你在wxml中写代码一般都是这样

这样你去运行保存的话，他就会呈现出两个上下分布的块，并没有出现背景图的效果，这个时候，我们就加个posittion : flexd，让上面的背景随便伸缩到任意一个位置，不会呈现出区域化的问题了，并且还要加z-index：-1，这是为了使背景图这个块变成最底层，各种好看的页面都是一层一层的，而这种层数不管再多，你人眼都观察不出它的厚度的好嘛。

---