[uni-app]h5+app页面背景图全屏显示

最新推荐文章于 2025-04-30 10:06:44 发布

Also_easy

最新推荐文章于 2025-04-30 10:06:44 发布

阅读量4.6k

点赞数 2

分类专栏： uni-app 文章标签： uni-app css

本文链接：https://blog.csdn.net/yiself/article/details/118753172

版权

uni-app 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在uni-app框架下遇到的设置页面全屏背景图问题，以及解决该问题的方法。通过调整CSS样式，特别是使用page选择器设置背景图，并在遇到编译后背景图丢失的问题时，采用fixed布局实现全屏展示。此外，还分享了在不同场景下选择合适背景图设置方式的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

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

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

问题说明

问题

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

样式

效果图

问题所在

解决办法

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

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

完美解决

后续问题

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