前言

今天试用uni-app框架做个仿酷狗App项目，发现设置页面背景图全屏出现问题。一般来说设置页面背景图有两种方法：

1. 使用fixed布局的image标签。
2. 设置body标签的背景图并设置宽高为100%。

而实践发现第一个方法可以用但可能出现其他元素的覆盖问题，不推荐使用。但第二个方法更是无法使用。

问题说明

问题

我原以为uni-app框架下body标签即template下的view标签，我对其设置了铺满容器的背景图，但效果图中可见背景图并没有铺满屏幕。调用查看器可以看见在view外还有一个父容器body，而我对其设置的样式main并没有作用于整个页面而是页面下的一个子容器。但是uni-app框架不像vue-cli框架的路由一样可以对最外部组件进行设置，因为全局启动项App.vue中是没有页面代码的。

login.vue

样式

效果图

问题所在

解决办法

那么我们如何解决这个问题呢？官方给我提供了方法：

/*要设置的body样式设置在这里面*/
page {
    background-image: url(../../static/pic/bg1.jpg);
    background-size: 100% 100%;
    width: 100%;  height: 100%;  
}

完美解决

后续问题

在编译成app的时候发现背景图居然没了！为了解决这个问题折腾了好久，论坛也没有相关的解决办法。给最外层的view标签添加背景图和100%宽高也没办法撑满全屏，被最外层的容器限制了。最后我灵机一动，将整个页面容器设为fixed脱离文档流再全屏展开就达到了预期效果！