html页面中,div设置了背景图片

Question

如题所述

Answer 1

当页面加载的时候，当前图片会被加载完成，而翻转效果的图片只有在触发的时候才会加载，所以会出现一段时间的空白，解决方法，运用css
sprite，也就是图片翻转技术，事先把两张翻转前与翻转后的图片结合在一张图片里，再把元素的背景固定死高度显示翻转前的图片，然后在利用hover伪类翻转，使用背景定位background-position：0px
0px，使得翻转时把下面未出现的图片拉出来，从而实现翻转，这样的话页面加载时就已经加载完整张图片了，好处是减少了http请求、也解决了翻转出现空白停顿的问题了，但不得使用img，翻转会出现问题，不懂可以来问我

Answer 2

将背景放在1个图片里，使用background-position来设置hover可以解决图片加载不完，同时注意图片的尺寸。