background-image属性的一些坑

596 阅读1分钟

今天做使用background-image属性,发现在微信小程序内能显示背景图片,可在浏览器里显示不出来背景图,手机模拟器中也不能显示这种情况出现。可是最后刷新几次好像又重新出现了,为了提高开发效率,我总结下使用背景图的注意事项。

一、背景图片不能太大:

好像是微信小程序不支持背景图片,只支持base64形式的图片,可是我用uniapp在微信模拟器中调试器确实显示了背景图片生效,有一次使用背景图生成失败因为图片没有压缩处理没有生成,经过压缩后成功显示。

二、背景图使用时最好是要把背景属性写完整而且最好是分开写不要写在一起:

刚开始在浏览器或者在手机模拟器中生成不了背景图片是因为背景图属性没有写完整,写完整后发现可以生成背景图。 背景图需要写的属性有:

  • background-color
  • background-image (url(/static/...));
  • background-repeat (no-repeat);
  • background-attachment (是否随内容滚动fixed:不随屏幕滚动);
  • background-position (left、right、center、top);
  • background-size (cover、auto 100%); 这些属性最好分开写,因为浏览器识别的时候写在一起会不出效果,微信小程序和手机模拟器可以出来效果;

三、可以给背景图外盒子一个宽高;