首页 > 其他分享> > Web全栈工程师之路(二)——CSS篇(十四)——雪碧图

Web全栈工程师之路(二)——CSS篇(十四)——雪碧图

2020-05-02 14:57:23 作者：互联网

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS初识(十三)雪碧图</title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
        }
        a:link{
            background-image: url("https://s1.ax1x.com/2020/04/27/JfWtCn.png");
            background-position: -4px 501px;
        }
        a:hover{
            background-position: -64px 501px;
        }
        a:active{
            background-position: -95px 501px;
        }
        /*
            图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，
            浏览器加载外部资源时是按需加载的，用则加载，不用则不加载。
            在这个例子中link是一开始需要加载的，而hover和active是在用到的时候才加载

            雪碧图：
                又名CSS精灵(css sprite)，是一种通过将所需要的图片整合在一张大图片里然后利用
                    background-position属性来选择大图片其中的小图，以此进行使用
                优点：
                    1.将多张图片合并到一张图片中，可以减小图片的总大小。
                    2.将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
                    3.解决了多个图片在使用时(网页加载后)出现了图片闪烁的问题

                缺点：
                    网站后期维护麻烦
                    只适用于背景图
        */
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

代码效果：

正常状态下：

触碰：

点击：

标签：Web,雪碧图,全栈,background,position,加载,CSS,图片
来源： https://www.cnblogs.com/lyrebirth-world/p/12818056.html