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 ;
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2006-12-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
