精灵技术(sprite)，什么是精灵技术，是做什么的，笔记

最新推荐文章于 2022-03-09 18:19:47 发布

原创最新推荐文章于 2022-03-09 18:19:47 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #定位

笔记同时被 2 个专栏收录

20 篇文章

订阅专栏

学习

20 篇文章

订阅专栏

本文深入解析CSS精灵技术，介绍如何通过整合多个小背景图至一张大图，减少HTTP请求，加速网页加载。文章涵盖精灵技术原理、实现步骤及具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

精灵技术(sprite)

为什么需要精灵技术？
当一个用户访问一个网站时，需要网页向服务器发送请求，网页上的每张图片都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图当做修饰，当网页中图像过多时，服务器就会频繁的接受和发送请求，这将大大降低页面的加载速度。

为了有效减少服务器接受和发送请求的次数，提高页面加载速度，css精灵技术出现了。

精灵技术其实是将页面中的一些背景图整合到一张大图中,然而，各个网页元素通常只需要精灵图中不同位置的么某个小图，要精确定位到精灵图中的每个小图
在这里插入图片描述

这样当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部显示出来。

需要用到的css的属性：

background-image、
background-repeat、
background-position 属性进行背景定位，精确定位（关键）

精灵技术的使用核心：

1.精准测量，每个小背景图片的大小和位置
2.给小盒子指定背景时，背景定位基本都是负值。

用上图做的一个简易精灵技术用法

<div>
        <li>
            <a href="#"> 
                
            </a>
        </li>
</div>


css：
*{margin: 0; padding: 0;}
        body{
            background: url(./1001812.jpg) repeat-y;
            background-size: 100% ;
        }
        div{
            width: 300px;
            height: 300px;
            margin: 20px;
            padding: 30px;
            border: 1px solid black;
        }
        li{
            list-style-type: none;
            border: 1px red solid;
            height: 30px;
            width: 30px;
            line-height: 30px;
            text-align: center;
            background: url(./1.png) no-repeat;
            background-position: -20px -8px;
        }

补充：

css：first-child选择器
选择每个 < p > 中的每个 < i > 元素并设置其样式，其中的 < p > 元素是其父元素的第一个子元素：

p:first-child i {
      background:yellow;
}

选择列表中的第一个 < li > 元素并设置其样式：

li:first-child {
       background:yellow;
}

设置每个 < ul > 的首个子元素，并设置其样式：

ul>:first-child {
       background:yellow;
}