解决背景偏移的闪烁问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
        /*
         * 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
         *  这个闪烁会造成一次不佳的用户体验。
         * 产生问题的原因：
         *  背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，
         *  但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
         *  我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
         *      所以hover.png和active.png并不是立即加载的
         *  当hover被触发时，浏览器才去加载hover.png
         *  当active被触发时，浏览器才去加载active.png
         *  由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
         * 
         *  为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
         *  然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
         *  优点：
         *      1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
         *          提高访问效率，提高了用户体验。
         *      2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
         * 
         * 
         */
            
            .btn:link{
                /*将a转换为块元素*/
                display: block;
                /*设置宽高*/
                width: 93px;
                height: 29px;
                /*设置背景图片*/
                background-image: url(img/btn/btn2.png);
                /*设置背景图片不重复*/
                background-repeat: no-repeat;
                
            }
            
            .btn:hover{
                
                /*
                 * 当是hover状态时，希望图片可以向左移动
                 */
                background-position: -93px 0px;
            }
            
            .btn:active{
                /*
                 * 当是active状态时，希望图片再向左移动
                 */
                background-position: -186px 0px;
                
            }
            
        </style>
    </head>
    <body>
        
        <!-- 创建一个超链接 -->
        <a class="btn" href="#"></a>
        
    </body>
</html>
解决背景偏移的闪烁问题

推荐阅读更多精彩内容
