通过图片交换实现了按钮图片,但是存在一个问题,老是先加载一个图片,另外一个却加载得慢,效果反而不好。这是网上的解决方法,实现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 ;
}
CSS实现按钮的两张图片的同步出现
最新推荐文章于 2021-08-04 00:02:42 发布