Bootstrap

CSS background背景图不显示(空白、部分显示)的问题

笔者遇到过2种情况。

背景图的链接出现跨域问题

现象
背景图链接如果跨域了,部分浏览器(包括Chrome)不显示图片,导致出现一片白板等。
解决
改用<img src=""/>标签进行等效处理。


页面有多个动画效果

现象:因为页面有多个动画效果,导致body背景图在苹果手机上,大概率加载不出来,或者只加载中间一部分。
定位出来问题的原因,是动画效果(infinite)影响了背景图的渲染。

当时的解决办法:让所有动画延迟1s播放。

display: inline-block;
animation-delay: 1s
;