小程序背景图片自适应完整指南

一、背景图片自适应大小

在小程序中，背景图片可以通过设置“background-image”属性来实现。但是，由于不同设备的屏幕尺寸不同，如果不进行适当的处理，很容易导致图片变形或者无法完全显示。为了解决这个问题，可以使用以下方法来实现背景图片的自适应大小：

1.1 宽度等比缩放

在设置背景图片时，可以给它一个固定的高度，而将宽度设置为100%，这样就可以保证图片宽度与屏幕宽度相等了。但是，这样做会导致图片变形，因此我们需要使用CSS的“background-size”属性来控制图片的缩放方式。通过设置属性值为“100% auto”，可以让图片宽度等比例缩放，高度自适应，从而保证图片不会变形。

1.2 高度等比缩放

如果希望图片高度自适应，而宽度固定，也可以使用类似的方法来实现。首先将背景图片的高度设置为100%，宽度设置为一个固定的值，然后将“background-size”属性设置为“auto 100%”，这样就可以保证图片高度自适应，宽度固定。

1.3 完全覆盖

除了等比缩放，还有一种处理方式是完全覆盖，这意味着图片会拉伸到整个屏幕大小。为了实现这个效果，可以将“background-size”属性设置为“cover”，这样图片会按比例调整大小，直到能够完全覆盖整个容器。

二、小程序设置背景图片全屏

如果想要让小程序背景图片占满整个屏幕，可以设置页面的根容器body或者wxml文件中的view的高度，让它等于窗口高度。下面是示例代码：

/*css样式*/
page {
  height: 100%;
}

/*或者*/
view {
  height: 100vh;
}

三、微信小程序背景图片

3.1 如何添加背景图片

在wxml文件中添加如下代码：

在CSS中添加：

/*css样式*/
.bg-image {
  background-image: url(../image/bg.jpg);
  background-size: cover;
  background-position: center;
}

3.2 小程序导航栏背景图片

小程序中的导航栏默认是白色的，如果想要更改背景颜色或者添加背景图片，可以使用WXNavigationBar组件。下面是示例代码：

{
  "navigationBarBackgroundColor": "#000000",
  "navigationBarBackgroundImage": "./image/bg.jpg",
  "navigationBarTextStyle": "white"
}

3.3 微信小程序背景图片不显示

如果在小程序中设置了背景图片但是无法显示，可以检查以下几个方面：

1. 文件路径是否正确；

2. 图片格式是否正确，支持的格式包括jpg、png、gif、bmp；

3. 是否使用了相对路径，应该使用绝对路径。

3.4 微信小程序背景图片怎么铺满

可以使用“background-size”属性来控制图片的铺满方式，设置为“cover”可以让图片按比例缩放铺满整个容器。

3.5 微信小程序背景图片完全覆盖显示

可以将“background-size”属性设置为“100% 100%”，这样图片会完全覆盖整个容器。如果想要保持图片比例，可以使用“cover”设置方式。

四、微信小程序如何设置背景图片选取

在小程序中，可以通过添加图片组件来实现图片选取。下面是示例代码：

//js文件
Page({
  data: {
    bgImage: ""
  },

  chooseImage: function() {
    wx.chooseImage({
      success: res => {
        this.setData({
          bgImage: res.tempFilePaths[0]
        })
      }
    })
  }
})

这样就可以实现从手机相册中选取图片，并将它设置为背景图片了。