iOS开发html+css学习之按钮 精灵图
2019-03-27 本文已影响0人
程序大猩猩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
做完功能以后，发现在第一次切换图片的时候，会发现图片有一个非常快的闪烁，
这个闪烁会造成一次不佳的用户体验。
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，流浪器每加载一个外部资源就需要单独的发送一次请求，
但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
所以hover.png和active.png并不是立即加载的
当hover和active触发的时候才会去加载
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）精灵图
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高用户体验。
2 将多个图片整合为一张图片，减少了图片的总大小，提高请求速度，增强了用户体验
*/
.btn:link {
/* 将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 href="#" class="btn"></a>
</body>
</html>
