如何让 uni-app 页面中的背景图片高度和宽度自适应
如何让 uni-app 页面中的背景图片高度和宽度自适应在今天做项目的时候突然遇到一个问题,我给页面加一个背景图片,但是当页面高度超过100%时,图片会覆盖不到, 如图所示:写的代码是这样的(错误的代码)// App.vue 页面<style lang="scss">page,body {overflow-y: scroll;overflow-x: hidden;background-
·
如何让 uni-app 页面中的背景图片高度和宽度自适应
在今天做项目的时候突然遇到一个问题,我给页面加一个背景图片,但是当页面高度超过100%时,图片会覆盖不到, 如图所示:
写的代码是这样的(错误的代码)
// App.vue 页面
<style lang="scss">
page,body {
overflow-y: scroll;
overflow-x: hidden;
background-image: url(static/login_bg2.jpg) ;
background-size: cover;
background-repeat: no-repeat;
box-sizing: border-box;
}
</style>
解决问题
效果图
正确代码如下所示:
// App.vue 页面
<style lang="scss">
page,body {
background: url(static/login_bg2.jpg) no-repeat center center fixed ; //参数解释请往下看
background-size: cover;
box-sizing: border-box;
}
</style>
background 属性语法如下:
更多推荐
已为社区贡献11条内容
所有评论(0)