iOS学html 软件,iOS开发html+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);

}