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 ; 
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Young Dreamer

VUE中的v-if与v-show

1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样...

2187
来自专栏九彩拼盘的叨叨叨

jQuery 复制表单 Bug 及修复

当 jQuery 复制表单时,会漏复制 textarea 和 select 的值。更详细的描述见 http://bugs.jquery.com/ticket/3...

761
来自专栏Golang语言社区

golang进度条

进度条元素 ▪ 总量 ▪ 当前进度 ▪ 耗时 通过以上元素可以延伸出:完成百分比、速度、预计剩余时间、根据设置速度快慢阈值用不同的颜色来显示进度条。 实现 进度...

40810
来自专栏Hadoop实操

使用Cloudera Manager查看集群,服务,角色和主机的图表

对于集群,服务,角色和主机,你都可以查看与之相关的各种指标的图标的仪表盘。虽然对于不同实体的指标显示是不一样的,但是基本功能都是一样的。

5669
来自专栏Samego开发资源

QT Creator Usage

2064
来自专栏破晓之歌

AI-icon制作 原

825
来自专栏前端小叙

react给一个div行内加背景图片并实现cover覆盖模式居中显示

这里注意,如果简写里要写background-size,则这里必须写 /  ,否则整个背景图片样式没有解析出来。

5962
来自专栏小狼的世界

IE支持而Firefox不支持的CSS属性

942
来自专栏vue学习

29、地址列表

(1)关于颜色的改变前面在做轮播图的时候我们已经处理过,当时我们的解决方法是用在开发中工具中找到它的class类名,然后我们使用vue的穿透选择器改变这个类名的...

1594
来自专栏禁心尽力

快速完成(图片旋转,查看原图)

一个小小的前端需求送给大家,使用js实现图片旋转,并且点击图片能够实现规定格式的大图。   主要使用的是jQuery的delegate()方法实现图片旋转,该...

3048

扫码关注云+社区

领取腾讯云代金券