按钮不闪烁（精灵图）

时间 2021-01-15

效果展示：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url('./img/09/btn.png')
        }

        a:hover{
            background-position: -93px 0;
        }

        a:active{
            background-position: -186px 0;
        }

/* 
        图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，
                浏览器加载外部资源时是按需加载的，用则加载，不用则不加载
                像我们上边的练习link会首先加载，而hover和active会在指定状态触发时才会加载

        解决图片闪烁的问题：
            可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片
            这样图片会同时加载到网页中 就可以有效的避免出现闪烁的问题
            这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

        雪碧图的使用步骤：
            1.先确定要使用的图标
            2.测量图标的大小
            3.根据测量结果创建一个元素
            4.将雪碧图设置为元素的背景图片
            5.设置一个偏移量以显示正确的图片

        雪碧图的特点：
            一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验
 */
        
        .box1{
            width: 128px;
            height: 46px;
            background-image: url('./img/09/amazon-sprite_.png');
            background-position:0 0;
        }

        .box2{
            width: 42px;
            height: 30px;
            background-image: url('./img/09/amazon-sprite_.png');
            background-position: -58px -338px;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>

    <a href="javascript:;"></a>
    
</body>
</html>

素材：

amazon-sprite_.png：

btn.png