uni-app背景图片 background-image,支持 base64 格式图片、支持网络路径图片、本地路径背景图片

背景图片

uni-app 支持使用在 css 里设置背景图片,使用方式与普通 web 项目相同,需要注意以下几点:

  • 支持 base64 格式图片。
  • 支持网络路径图片。
  • 使用本地路径背景图片需注意:
    1. 图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
    2. 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,或将其挪到服务器上,从网络地址引用。
    3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
       .test2 {
           background-image: url('~@/static/logo.png');
       }

注意

  • 微信小程序不支持相对路径(真机不支持,开发工具支持)
  • 其他端使用本地背景图片作为背景图没有限制

 解决图片因为高度而不能铺满的问题




base64 格式图片核心源码:(图片转换Base64:http://imgbase64.duoshitong.com/)






支持网络路径图片






 

你可能感兴趣的:(uni-app)