微信小程序设置背景图 - 王保利d窝

微信小程序设置背景图

在wxss里设置背景为本地图片是不可以的，会报错：“本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签”。

 

所以在wxml里添加背景图用网络资源。

先设置page的样式：

page{
  width:100%;
  height:100%;
  overflow: hidden;
}

再添加一个view

<view class=\'whole\'>
</view>

设置这个view的样式

.whole{
  width:100%;
  height:100%;
  background: url(\'...url...\');
  background-size: cover;
}

背景图片就平铺了。

 image的标签

<view class=\'whole\'>
  <image class=\'whole\' src=\'../img/beijing.jpg\' mode=\'scaleToFill\'></image>
</view>

 

之后的东西就写在这个view标签里面。