uniapp h5图片当背景图

设置 UniApp H5 项目中图片作为背景图的最佳实践
为了确保在 UniApp 的 H5 项目中能够正确设置并显示图片作为背景，可以遵循以下最佳实践：
使用 style 属性设定背景图像
对于页面级别的背景图设置，推荐直接在页面根节点 <template> 中的最外层标签应用样式属性。这样能保证整个页面拥有统一的背景。
<template>
<view class="background-container">
<!-- 页面其他组件 -->
</view>
</template>

<style scoped>
.background-container {
width: 100%;
height: 100vh; /* 占满视口高度 */
background-image: url('/static/images/background.jpg'); /* 背景图片路径 */
background-size: cover;
background-position: center;
}
</style>
登录后复制
此方法利用 CSS 来控制背景大小 (cover) 和位置 (center) ，使得背景适应不同尺寸屏幕的同时保持美观[^1]。
防止键盘弹出影响布局
当涉及到输入框等交互元素时，可能会遇到键盘弹出导致背景或其他 UI 组件被压缩的情况。针对这一现象，在处理背景图时需特别注意防止其因键盘触发而变形或移位。解决方案之一是在 App.vue 或 main.js 文件里全局监听软键盘事件，并动态调整 body 标签的高度以抵消键盘带来的视觉干扰[^2]。
// 在 App.vue 或者 main.js 中加入如下代码片段
import Vue from 'vue';
Vue.prototype.$hideKeyboardEffect = function() {
document.body.style.height = window.innerHeight + "px";
};
window.addEventListener('resize', () => {
if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
setTimeout(() => { this.$hideKeyboardEffect(); }, 10);
}
});
登录后复制
上述 JavaScript 片段通过监听窗口大小改变事件(resize)检测是否有输入控件处于激活状态；一旦发现，则立即执行 $hideKeyboardEffect() 方法锁定当前 body 的高度，从而避免由于键盘升起造成的界面错乱问题。