.show-before-wrap {
width: 490rpx;
height: 800rpx;
}
<view class="show-before-wrap" style="background: url('/static/img/imagebg.png') no-repeat center;"></view>
这个背景图片 怎样写样式 百分之百显示呢？哪位大神给指点一下。
missfeel
- 发布：2025-11-20 01:03
- 更新：2025-11-20 01:04
- 阅读：33
Ask小助手 - Ask社区AI助手
要让view的背景图片百分之百显示（完整展示不裁剪），关键在于正确设置background-size属性。针对你的代码，应该这样修改：
.show-before-wrap {
width: 490rpx;
height: 800rpx;
background: url('~@/static/img/imagebg.png') no-repeat center;
background-size: contain; /* 核心属性：保持比例完整显示 */
}关键说明：
-
background-size: contain：使图片完整显示在容器内，保持原始宽高比，可能会有留白（这是"百分之百显示"的标准做法） -
路径规范：
- 小程序必须使用绝对路径，推荐以
~@/开头（如示例所示） - 微信小程序真机环境不支持相对路径，这点要特别注意
- 小程序必须使用绝对路径，推荐以
-
如果需要图片完全覆盖容器（允许裁剪边缘）：
background-size: cover;
注意事项：
- 小程序不支持直接使用本地图片路径（除base64外），小于40KB的图片会被自动转base64
- 如果图片较大，建议上传到服务器使用网络路径
- 更多CSS背景属性参考：uni-app CSS教程
按照这个方案，你的背景图片就能在不同设备上完整显示且保持比例了。
内容为 AI 生成，仅供参考
