使用雪碧图作为封面图片单张显示的技巧解决图片切换出现空白

一：解决问题

   在开发前端的时候我们有时候会遇到需要不断的切换背景图片，而且背景图片是铺满整个页面的，这时候在手机端当切换整个页面的背景图片时就会发一个短暂的留白，这种问题主要会出现在采用框架开发，切手机端显示时。

二：如何解决：

 可以将多张图片合成一张雪碧图，然后在切换背景图片的时候实际切换背景图片的位置，这样就能够解决了

三：解决方案：

 结合background-size以及background-position 两个属性进行解决。（1）：首先设置background-size: x00%,100%,其中x=你的雪碧图是由多少张图片合成的，例如我的一张雪碧图是由3张大小为100px*100px合成的，那么雪碧图的大小应该是300*100,那么这里的x=3。（2）：设置background-position:0 0,这样会默认显示雪碧图中最左边的那一张图，然后每次页面背景图片切换的时候只需要改变background-position中第一个参数的位置，即background-position：y% 0,其中每次Y改变的值应该是  100%÷（n-1）,n=雪碧图里面包含的图片张数，举个栗子：，例如我的一张雪碧图是由3张大小为100px*100px合成的，那么这里的n=3,我没次切换背景图片

y=33.3;

四：小结

  以上为个人总结如果有更好的方案欢迎留言告知。具体代码截图（我的雪碧图是由4张图片组合而成）,采用angular4框架写的

（1）：css

(2):html

（3）：TS部分

       （3.1）变量定义部分：

         （3.2）代码执行部分：