html图片闪烁设置,HTML&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;

}