小程序设置背景图片 (方法全)

待我称王封你为后i 2022-02-25 06:56 978阅读 0赞

**小程序背景图设置**

在`wxss`文件中，使用`background-image: url();`设置背景图，报错，提示 `pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签`小程序中设置区域背景图，对于在`wxss`文件中，存在本地资源无法获取的问题。解决方案在错误提示中也给出来了

**1、使用网络图片**

我们可以把需要的背景图片上传到服务器上，然后使用背景图片地址。

如果我们需要动态改变背景图片，我们可以设置行内样式style绑定变量从而做到动态改变背景图片；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70][]

**2.利用base64格式的图片**

我们可以用base64的图片做到设置背景图片

在这里我推荐一个在线转换的base64图片格式的地址[http://imgbase64.duoshitong.com/][http_imgbase64.duoshitong.com]

选择图片会转换成base64格式的图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70 1][]

复制里面的代码放到background: url(base64转换的代码);这样既可做到设置背景图片也不用放到服务器上

**3.利用image标签做到设置背景图片**

思路：我们只要利用css中的z-index改变层级既可做到变成背景图的样子

看代码

wxml：

wxss：

page{
     height: 100%;
     width: 100%;
    }
    .login-box {
      height: 100%;
    }
    
    image {
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 100%;
      z-index: -999;
    }

这样我们也可以做到背景图的效果

更多请点击[我的博客][Link 1]

推荐[最全面的vue和微信小程序的区别][vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70]: /images/20220225/e410e95c25b44838b8dd29f009925323.png
[http_imgbase64.duoshitong.com]: http://imgbase64.duoshitong.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDI4Njc4_size_16_color_FFFFFF_t_70 1]: /images/20220225/19b31bff8dc546ffab54d804a24be473.png
[Link 1]: https://blog.csdn.net/qq_40428678
[vue]: https://blog.csdn.net/qq_40428678/article/details/88839518