CSS实现按钮的两张图片的同步出现

      通过图片交换实现了按钮图片，但是存在一个问题，老是先加载一个图片，另外一个却加载得慢，效果反而不好。这是网上的解决方法，实现css图片的预加载：
<style>
#preloadedImages {
        0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png);
       background-image: url(path/to/image2.png);
       background-image: url(path/to/image3.png);
       background-image: url(path/to/image4.png);
       background-image: url();
} 
</style>
 <div id="preloadedImages"></div>

      我没有采用这个，因为我的需求比较特别，加载慢也无所谓，但必须要保证按钮的两张图片要么不出现，要么同时出现，就是必须同步。所以，我采用的方法是，把两张图片放到一起，用背景图片偏移的方式来控制图片的切换。css代码如下
#OkBtn{
 display:block;
 100%;
 height:100%;
 background-image:url(../images/login_ok.jpg);
 background-repeat:no-repeat;
}
#OkBtn:hover{
 background-image:url(../images/login_ok.jpg);
 background-repeat:no-repeat;
 background-position: right bottom ; 
}