72雪碧图（css-sprite）

最新推荐文章于 2022-11-17 19:20:37 发布

广东码农

最新推荐文章于 2022-11-17 19:20:37 发布

阅读量61

点赞数

分类专栏： html+css 文章标签：雪碧图 CSS-sprite 前端优化 HTTP请求页面加载

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/117958795

版权

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

为了解决上节的缺点问题，所以诞生了雪碧图

雪碧图就是把多个图片合成一张，这样浏览器就不会请求多次了
在这里插入图片描述

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪碧图</title>
    <style>
        /* 
            解决图片闪烁的问题：
                可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示相应的图片
                这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题
                这个技术在网页中应用十分广泛，被称为css-sprite，这种图我们成为雪碧图

            雪碧图的使用步骤：
            参考：https://www.bilibili.com/video/BV1XJ411X7Ud?p=92
                10：45开始
                1. 先确定要使用的图标
                2. 测量图标的大小
                3. 根据测量结果创建一个元素
                4. 将雪碧图设置为元素的背景图片
                5. 设置偏移量以显示正确的图片
         */
        a:link {
            display: block;
            width: 477px;
            height: 298px;
            background-color: red;
            background: url("./imgs/sprite.png");
            background-size: auto 298px;
        }
        a:hover {
            background-position: -477px 0;
        }
        a:active {
            background-position: -954px 0;
        }
    </style>
</head>
<body>
    <a href="javascripte:;"></a>
</body>
</html>