CSS基础(24)_Sprite技术(CSS雪精灵、CSS雪碧图)

CSS Sprite技术(CSS雪精灵、CSS雪碧图)

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，每显示一张图片都会发送http请求，所以图片越多，造成的延迟越大，为了优化，因此我们借鉴了Sprite技术。CSS sprite也叫做CSS雪精灵、CSS雪碧图，是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星小图都包含到一张大图中去。

技术背景

Sprite技术也叫前景绘制技术,是Computer Graphics的一个术语。早期的游戏机因为性能不足，从存储器加载到内存速度不够快，而游戏角色需要很多图片来表示动作，分成很多图片的话需要每次都从存储器中加载到内存，速度比较慢，所以聪敏的开发者想出来把所有的动作图片合成成一张图片，这样只要加载一次就能全速在内存中读取。

使用步骤：

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

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>css雪碧图</title>
<style>
    a:link{
        /* 超链接行内元素转换为块元素 */
        display: block;
        background: url(../picture/16.png); 
        background-position: -28px -25px; 
        width: 70px;
        height: 70px;
    }
    a:hover{
        background-position: -28px -150px; 
    }
    a:active{
        background-position: -28px -275px;
    }
</style>
</head>
<body>
    <a href="javascript:;"></a>
</body>
</html>

效果图：

鼠标移入：

鼠标点击：

优势

1、将多个图片统一保存到一个大图片中，避免出现图片闪烁(原先使用多图片切换时，http第一次加载图片完成之前的空隙时出现白色背景，时间很短。而一张大图片则只加载一次，调整background-position来切换显示图片)
2、减少了网页的HTTP请求，从而大大提高了页面的性能，提升用户体验。
3、减少图片的字节。减轻了对图片命名的困扰，提高了网页的制作效率。

注意：
浏览器加载外部资源时是按照需求加载的，用则加载，不用则不加载。像我们练习中link会首先加载，而hover和active会在指定状态触发时才会加载。

原文链接：https://blog.csdn.net/no15870678621/article/details/125361529