CSS實現按鈕的兩張圖片的同步出現

      通過圖片交換實現了按鈕圖片，但是存在一個問題，老是先載入一個圖片，另外一個卻載入得慢，效果反而不好。這是網上的解決方案，實現css圖片的預先載入：
<style>
#preloadedImages {
       width: 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;
 width: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 ; 
}