小程序开发1-全屏背景图的处理

page {
  /* background: red; */
  display: flex; 
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height:100vh;
  bbackground-image:url("https://img-blog.csdnimg.cn/20200730105716926.jpg");
  background-size:cover;
  
}

直接再wxss中写bbackground-image, 注意wxss中不能使用本地的地址, 可以使用网络图片地址;
background-size:cover; 使用cover (把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。)
width: 100%;
height:100vh;
指定以上可以避免背景图因不同屏幕尺寸变形.

效果图

覆盖导航栏

在page的json部分加入 “navigationStyle”:“custom”

上下滑动时候背景图固定不动

加入overflow: hidden;即可避免背景图在上下拖曳的过程中出现不一致的背景,造成视觉上的差体验.