欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序设置背景图片,背景图片覆盖全屏,图片url获取方法

程序员文章站 2022-06-22 20:08:25
在页面的wxss里设置pagepage{ background-image:url(https://i.loli.net/2020/08/08/KIaQSMvrtEVCwOb.jpg); width:100%; height:100vh; background-size: 100% 100%;}其中的图片url可以从SM.MS(https://sm.ms/)网站上传,然后在下面的image url复制粘贴宽高设置,让图片保持比例背景大小,让图片填充屏幕,如果图片和屏幕.....

 在页面的wxss里设置page

page{
  background-image:url(https://i.loli.net/2020/08/08/KIaQSMvrtEVCwOb.jpg);
  width:100%;
  height:100vh;
  background-size: 100% 100%;
}

 其中的图片url可以从SM.MS(https://sm.ms/)网站上传,然后在下面的image url复制粘贴

宽高设置,让图片保持比例

背景大小,让图片填充屏幕,如果图片和屏幕比例不同,则直接填充

 

调整app.json里面的window


  "window":{
    "navigationStyle":"custom" 
  },

这一步设置是让图片覆盖整个手机,包括状态栏

 

展示

小程序设置背景图片,背景图片覆盖全屏,图片url获取方法

本文地址:https://blog.csdn.net/weixin_43714971/article/details/107885457