uni-app中background-image不生效主因是路径错误、容器高度未撑开、平台渲染差异及样式作用域问题；应使用~@/static/路径、fixed定位容器、z-index分层，并注意webp压缩与预加载。
uni-app 中 background-image 不生效的常见原因
直接写 background-image 却看不到图，大概率是路径或渲染机制问题。uni-app 的页面样式默认作用于 .uni-page-body 内部容器，而背景图若设在 page 或 view 上，常因高度未撑开、层级被覆盖或路径解析失败失效。
- 本地图片必须用
~@/static/xxx.png这类相对路径（@指向src目录），不能用绝对路径/static/xxx.png，否则 H5 环境可能 404 - 背景图设在
<page></page>根节点上无效——uni-app 编译后实际根是.uni-page-wrapper，需通过::before伪元素或额外view容器承载 - 微信小程序不支持 CSS 中的
background-image加载本地临时路径（如uni.chooseImage返回的tempFilePath），只能用image组件 +position: absolute模拟
全屏背景图的正确写法（H5 + 小程序通用）
最稳妥的方式是用一个固定定位的 view 覆盖整个可视区，再把图片作为其背景。这样绕过页面容器高度计算不可靠的问题，也避免小程序对 page 样式限制。
<template><view class="bg-container"><!-- 页面内容 --><view class="content">...</view></view></template><p><style>
.bg-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('~@/static/bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
.content {
position: relative;
z-index: 1;
}
</style></p>
-
width: 100vw和height: 100vh比100%更可靠，不受父容器高度塌陷影响 -
z-index: -1确保内容层在背景上方，但注意：iOS Safari 下z-index: -1可能导致元素无法响应点击，此时改用z-index: 0+pointer-events: none在背景层上，再给内容层加pointer-events: auto - 如果使用渐变叠加背景，建议用
background: linear-gradient(...), url(...)合并写法，避免多层view带来渲染开销
不同平台对 background-size: cover 的兼容表现
cover 在多数场景下能填满且居中，但 iOS 微信小程序和部分安卓 WebView 对 background-size 解析有偏差：可能出现拉伸变形、顶部留白或底部截断。
- H5 端可加
background-attachment: fixed实现视差效果，但会触发重绘，低端机卡顿明显，慎用 - 小程序端若发现
cover失效，尝试改用100% 100%+background-position: center，虽然会裁剪，但行为更确定 - 真正需要“等比缩放+完整显示”时，别依赖 CSS，改用
uni.getSystemInfo获取屏幕宽高，动态计算图片宽高比后设置image组件的mode="aspectFill"并绝对定位
uni-app 页面级背景图的性能提醒
背景图体积大会显著拖慢首屏渲染，尤其在 2G/弱网下用户可能看到长时间白屏。uni-app 不会自动懒加载页面背景图，得手动干预。
- 图片务必压缩：WebP 格式比 PNG 小 60%+，小程序基础库 2.10.3+ 已支持 WebP，H5 端可用
<picture></picture>回退 - 避免在
onLoad里动态设置背景图 URL——这会导致闪动；应在data初始化时就写好路径，或用v-if控制容器显隐，配合uni.preloadImage提前加载 - App 端（尤其是 iOS）若用本地资源作背景，确保图片已打入
static目录，不要从uni.downloadFile的临时路径读取，否则 iOS 会拒绝渲染
背景图适配不是写个 background-size: cover 就完事，关键在容器定位方式、路径解析时机、平台渲染差异三者的组合判断。最容易被忽略的是：你以为设在 page 上的样式，其实根本没作用到真实 DOM 节点上。
