【CSS 精灵图（sprite）】相关知识总结

最新推荐文章于 2024-08-21 12:30:00 发布

御弟謌謌

最新推荐文章于 2024-08-21 12:30:00 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/abraham_ly/article/details/111454224

版权

前端专栏收录该内容

52 篇文章 4 订阅

订阅专栏

【CSS 精灵图（sprite）】有这篇文章学习精灵图技术就够了

1、什么是精灵图？

CSS精灵图（sprite）直译为 “CSS精灵”，通常被称为 “CSS图像拼合”、“CSS贴图定位” 或 “CSS图片精灵”、“CSS雪碧图”……等。

简单来说，就是把一个页面涉及到的所右零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅幅地慢慢显示出来了。

2、为什么需要精灵图？

一个网页中往往会应用很多的背景图像作为修饰，当网页中的图像数量过多时，服务器就会频繁的接收和发送请求，这样就会造成服务器请求压力过大，而大大降低网页的加载速度。

因此，为了有效的减少服务器接收请求的次数，提高网页的加载速度，出现了CSS精灵技术，也称 CSS Sprites或CSS 雪碧。除此之外，精灵图技术的出现还有以下好处。

可以减少对服务器的调用、减少呈现网页所需的下载次数，节省带宽并缩短用户端的下载时间，减少网络拥塞。
可以很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

3、多倍图

物理像素？

物理像素:即设备像素，而物理像素点是屏幕显示的最颗粒，在同一设备上，它的物理像素和物理像素点是固定的。这是厂商在出厂时就设置好的，即一个设备的分辨率时固定的。比如iphone6的物理像素是750px * 1334px。

逻辑像素？

**逻辑像素:**即css像素，是视口中的一个小方格，所以css样式代码中使用的是逻辑像素。假如在一个设备中，物理像素和逻辑像素相同，将不会产生任何问题。但是在iphone4中，物理像素是640px * 960px，而逻辑像素为320px * 480px，因此需要使用大约4个物理像素来显示一个css像素(逻辑像素)。因为iphone的屏幕是Retina屏幕，也就是说将4个物理像素点（宽2个，高两个，合计4个）压缩到一个css像素中，来达到高清的效果。

Retina (视网膜屏幕)？

所谓“Retina”是一种显示技术，可以将更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由苹果公司发明。最初该技术是用于苹果的iPhone4上。其屏幕分辨率为960×640（每英寸像素数326ppi）。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。

物理像素比？

物理像素比是指：物理像素与逻辑像素之间的比例。当像素比为1:1时，使用一个物理像素显示一个逻辑像素，当像素比为2:1时，使用4个物理像素显示一个逻辑像素。

那么我们如何知道设备的物理像素比呢？总不能自己在那算吧，不用着急，js已经在window对象中为我们封装好了一个属性：var a = window.devicePixelRatio;，我们可以通过这个属性来获取设备的物理像素比。

倍图的作用？

在实际开发中，我们大多数情况下会使用到2倍图和3倍图来操作background-size属性，来解决精灵图（雪碧图）或背景图片模糊的问题。

在实际开发中，我们从UI小姐姐那拿到的设计图通常都是640px或750px的设计图，所以为了解决设备中背景图模糊的问题，我们可以把更多的像素点压缩至一块屏幕，或者说压缩到一个逻辑像素(css像素)内，从而达到更高的分辨率并提高屏幕显示的细腻程度。

总结

设备物理像素比：window.devicePixelRatio即像素的压缩比例。在移动端为了让图片在高清手机上显示的更加细腻，通常会使用更大的图片，比如二倍图或者三倍图，那么我们就可以使用物理像素比来解决背景图模糊的问题。

4、背景缩放

介绍：background-size 属性指定背景图片的大小

语法：background-size: length | percentage | cover | contain;

**单位：**px(像素) 或 %(百分比)

**注意：**如果想要图片在盒子内全部覆盖显示，则使用100%即可

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

5、如何使用精灵图

使用background-img属性载入精灵图
使用background-repeat属性设置图片禁止平铺
使用background-position属性设置图片的坐标位置，精灵图一般使用的时负值，因为精灵图一般都是将图片往左和往下移动，所以使用负值。
使用background-size属性设置背景图的大小，如果是精灵图则将width设置为元素的width，因为装精灵图的盒子一般是正方形，高不用写则是auto。
这里牵扯到倍图的知识点，因为我们拿到的精灵图可能是多倍图，一般为二倍或三倍。我们可以根据图片的宽和盒子的宽得到这个倍数，并且将背景图缩小对应的倍数。然后再进行测量，给background-position对应的坐标。

6、“携程”案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二倍图精灵图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        ul li {
            margin-left: 10px;
            list-style: none;
            width: 40px;
            height: 40px;
            float: left;
            background: pink;
            background: url(./topnav.png) no-repeat;
            background-size: 40px;
        }
        
        ul li:nth-child(2) {
            background: url(./topnav.png) no-repeat 0px -40px;
            background-size: 40px;
        }
        
        ul li:nth-child(3) {
            background: url(./topnav.png) no-repeat 0px -80px;
            background-size: 40px;
        }
        
        ul li:nth-child(4) {
            background: url(./topnav.png) no-repeat 0px -120px;
            background-size: 40px;
        }
        
        ul li:nth-child(5) {
            background: url(./topnav.png) no-repeat 0px -160px;
            background-size: 40px;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>