前言

今天试用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脱离文档流再全屏展开就达到了预期效果！

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

HTML背景图全屏显示
要在HTML中实现全屏显示的背景图,可以使用CSS的background属性和一些特定的值来实现.以下是一种方法: HTML: <!DOCTYPE html> <html> & ...
html背景图片手机端全屏,css 背景图全屏显示，兼容移动端
.login { background: url(img/login.jpg) no-repeat center center; background-size: cover; background- ...
css禁止背景图拉伸_html-css控制背景图全屏拉伸不重复显示
在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...
背景图全屏水平垂直居中的方法
在开发登录页面或者其他全屏背景图的页面,需要背景图全屏并且水平垂直居中,根据浏览器窗口大小自适应.尝试多种方法后,使用了最简单的两行代码搞定. /* 要想实现全屏高度需要单独设置 html 和 bod ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
完美的css背景图片全屏显示，能比例缩小，不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
css 全屏显示一张图片_css3背景图片全屏显示的例子
背景图片全屏这个功能只需要定义重复即可解决了当然这个是有一些技巧了,下面我们就来看一篇关于css3背景图片全屏显示例子了,具体的如下所示. 如何用css背景图片拉伸以及100% 满屏显示呢?这个问题 ...
css背景图片全屏显示加居中显示
css背景图片全屏显示加居中显示,屏幕过大平铺屏幕过小居中裁剪 div { background:url(/i/bg_flower.gif); background-size:cover; -moz ...
uniapp 背景图片全屏显示在整个页面
要让uniapp中的背景图片全屏,可以在<style>标签中添加以下样式: page {background-image: url('/static/bg.jpg');background ...
h5页面实现浏览器全屏显示
目录开启全屏显示退出全屏显示获取当前是否全屏状态开启全屏显示 let el = document.documentElement; // 不同浏览器兼容方法调用 if(el.requestFu ...

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

前言

问题说明

问题

解决办法

后续问题

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

最新文章

热门文章