初识python面向对象编程
2024-10-19 07:39:33
HTML&CSS基础-图片按钮闪烁解决方案
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.图片按钮存在闪烁的案例
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片按钮</title>
<style type="text/css">
/**
* 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的体验。
*
* 产生闪烁的原因:
* 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独发一次http请求,但是我们
* 外部资源并不是同时加载，浏览器惰性的，它默认会在资源被使用时才去加载资源。也就是说，在咱们这个案例中，一
* 上来只会加载link.png这个背景图片，由于伪类hover和active的状态没有马上触发，所以hover.png和
* active.png并不是立即加载的，而是当hover被触发时浏览器才会去加载hover.png，当active被触发时才回去
* 加载active.png。由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现
* 闪烁的情况。当第二次再去触发时咱们又会发现就不会出现闪烁的情况，那是因为浏览器使用了第一次下载图片的缓存。
*
*/
.btn{
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 93px;
height: 29px;
/*设置背景图片*/
background-image: url(img/btn/link.png);
/*设置图片不重复*/
background-repeat: no-repeat;
} .btn:hover{
/*设置鼠标移入链接时的背景图片*/
background-image: url(img/btn/hover.png);
} .btn:active{
/*设置鼠标正在点击链接时的背景图片*/
background-image: url(img/btn/active.png);
}
</style>
</head>
<body> <!--创建一个超链接-->
<a class="btn" href="#"></a>
</body>
</html>
2>.浏览器打开以上代码渲染结果
二.解决图片按钮闪烁方案-图片整合技术(CSS-Sprite)
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片按钮</title>
<style type="text/css">
/**
* 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的体验。
*
* 产生闪烁的原因:
* 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独发一次http请求,但是我们
* 外部资源并不是同时加载，浏览器惰性的，它默认会在资源被使用时才去加载资源。也就是说，在咱们这个案例中，一
* 上来只会加载link.png这个背景图片，由于伪类hover和active的状态没有马上触发，所以hover.png和
* active.png并不是立即加载的，而是当hover被触发时浏览器才会去加载hover.png，当active被触发时才回去
* 加载active.png。由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现
* 闪烁的情况。当第二次再去触发时咱们又会发现就不会出现闪烁的情况，那是因为浏览器使用了第一次下载图片的缓存。
*
* 解决方案:
* 为了解决上述d问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
* 然后通过background-position属性来切换显示图片的位置，这种技术叫做图片整合技术(CSS-Sprite),这种技术有
* 以下优点:
* 1>.将多个图片整合为一张图片里，浏览器只需要发送一次http请求可以同时加载多个图片(提高了访问效率,也提高了用户体验)
* 2>.将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加的用户体验
*
* 温馨提示:
* 图片中会保存一个叫颜色表属性，如果下载三个图片就会保存三个图片的颜色表，下载一个图片只需要保存一个颜色表从而节省了一定的存储空间
*
*
*/
.btn{
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 93px;
height: 29px;
/*设置背景图片*/
/*background-image: url(img/btn/link.png);*/
background-image: url(img/btn/btn.png);
/*设置图片不重复*/
background-repeat: no-repeat;
} .btn:hover{
/*设置鼠标移入链接时的背景图片*/
/*background-image: url(img/btn/hover.png);*/
background-image: url(img/btn/btn.png);
/*当hover状态时，希望图片可以向左移动*/
background-position: -93px 0px;
} .btn:active{
/*设置鼠标正在点击链接时的背景图片*/
/*background-image: url(img/btn/active.png);*/
background-image: url(img/btn/btn.png);
/*当active状态时，希望图片可以再一次向左移动*/
background-position: -186px 0px;
}
</style>
</head>
<body> <!--创建一个超链接-->
<a class="btn" href="#"></a>
</body>
</html>
2>.浏览器打开以上代码渲染结果
最新文章
- 小小C程序（九九乘法表）
- 资源文件assets和 res下面raw文件的使用不同点
- android:screenOrientation的说明 固定屏幕显示方向
- new int[]和new int()的区别
- jsp无法支持el标签及jstl标签
- MySQL如何选择float, double, decimal
- HTML5之兴趣爱好
- ServletContext对象(每个工程只有一个此对象)
- 转：iOS程序main函数之前发生了什么
- Java基础总结--流程控制
- jQuery 函数位于一个 document ready 函数中
- 01安装Python虚拟环境
- redis 哈希(hash)函数
- Python scrapy - Login Authenication Issue
- 背水一战 Windows 10 (57) - 控件（集合类）: ListViewBase - 增量加载, 分步绘制
- Ubuntu系统下OpenDaylight源码编译安装
- Java中面向对象三大特征
- iOS：通信录（完成）（18-01-18更）
- hdu 5468(dfs序+容斥原理)
- K8S网络排故障一则--iptables规则