uniapp 页面添加背景图片不显示

最新推荐文章于 2025-03-07 15:59:06 发布

原创最新推荐文章于 2025-03-07 15:59:06 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #css #前端

文章讲述了在uniapp开发中遇到的一个问题，即使用特定的CSS代码在浏览器上能正常显示背景图片，但在真机测试时背景图片变为空白。作者通过在页面根标签添加调整高度和宽度的代码解决了这个问题，使得背景图片在手机上能正确显示。

场景：uniapp页面添加背景图片在浏览器上显示在真机上空白

官方给的注意事项是

/*    page {
       height: 100%;
   background-image: url('~@/static/login/bg.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   } */

我适配的是app用的本地图片，先用的上边这段代码在浏览器上正常，但是app真机测试显示空白，然后在页面根标签上加了下面代码手机上才显示背景图片

   .block {
       width: 100%;
       height: 100vh;
       background-image: url('~@/static/login/bg.png');
       background-size: cover;
       background-repeat: no-repeat;
   }