1. 精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

2. 制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。

我们精灵图的宽度取决于最宽的那个背景。

我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。

在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

3.以京东的精灵图为例

使用如下

    <!DOCTYPE html>

    <html>

    <head>

        <title></title>

    </head>

    <style type="text/css">

        .mod_service_duo {

            border:1px solid purple;

            background-repeat: no-repeat;

            background-image: url(./23f3ddf914b1b527d0429a3d713cfe3a.png);

            background-position: 0 -192px;

            width:36px;

            height:42px;

        }

    </style>

    <body>

        <div class="mod_service_duo"></div>

    </body>

    </html>

效果如图所示

4. 总结

使用精灵图的优点

对于浏览器来说请求多张小的图片和请求一张大的图片当然是后者的性能更好，大大减少了浏览器向服务器的请求次数，减少了http请求次数，这也是精灵图被广泛使用的主要原因。

使用精灵图可以减少图片的字节数，如果一张图片是4K，9张就是36K，而将所有图片整合在一张图片上之后，只需要4-5K就可以了。

在整理图片时，不需要纠结图片的取名问题，特别是在大型浏览器中，这种小的图片非常之多。将所有图片整合在一起，只需要取一个综合的名字就可以了，这样也可以大大提高工作效率。

如果想改变网站的风格，只需要改变一张图就可以了，便于后期的维护和修改。

使用精灵图的缺点

一定要考虑当前盒子的大小会不会漏出其他图片，一般情况来说还可以，但是如果网页时自适应的，那么可能就会比较麻烦了。

精灵图的创建比较麻烦，要计算好每个图片之间的距离和位置，如果做的不合理，那么使用时就会比较麻烦。

精灵图在后期维护上也带来了一定麻烦，因为所有的图片是在一张图片上，甚至位置都是相互影响的，所以一旦改变了一个，可能整张精灵图都需要重新做。

5. 参考

CSS精灵图

css精灵图使用的更多相关文章

  1. 课时102.CSS精灵图（掌握）

    我们这节课来介绍一个和背景图片相关的东西,精灵图 1.设么是css精灵图? css精灵图是一种图像合成技术 2.css精灵图作用 可以减少请求的次数,以及可以降低服务器处理压力 3.如何使用css精灵 ...

  2. CSS精灵图与字体图标

    CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多 ...

  3. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

  4. css精灵图&字体图标

    精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...

  5. CSS精灵图(王者荣耀案例)

    首先,我们应该知道引入精灵图的原因: 具体是因为,网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加 ...

  6. css 精灵图的使用

    精灵图的使用 1.给一个容器定义一个大小(宽高) 2.引入背景图 3.定位到自己你想要的图片位置 例如:  background-position: 0 0;  background-position ...

  7. CSS精灵图合成工具

    链接:http://pan.baidu.com/s/1o7OUUVo 提取密码:rmnx

  8. 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

随机推荐

  1. CentOS 7 各个版本的区别

    CentOS 7 各个版本的区别 2017年07月04日 10:44:37 程诺 阅读数 52029    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.n ...

  2. 翻译一篇英文文章，主要是给自己看的——在ASP.NET Core Web Api中如何刷新token

    原文地址 :https://www.blinkingcaret.com/2018/05/30/refresh-tokens-in-asp-net-core-web-api/ 先申明,本人英语太菜,每次 ...

  3. Mysql cluster管理节点配置文件详解

    一.定义MySQL Cluster的TCP/IP连接TCP/IP是MySQL集群用于建立连接的默认传输协议,正常情况下不需要定义连接.可使用“[TCP DEFAULT]”或“[TCP]”进行定义. 1 ...

  4. apply,call,bind函数作用与用法

    作用 可以把方法借给其它对象使用,并且改变this的指向 a.apply(b,[3,2]);//this指向由a变为b, a的方法借给b使用 实例: function add(a,b){       ...

  5. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  6. Linux-expect脚本-1

    expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的语法如下所示: 首行加上/usr/bin/expect spawn: 后面加上需要执行的shell命令,比如说spawn sudo ...

  7. MyOD C语言代码实现

    Myod C语言实现 一.题目要求 1 复习c文件处理内容 2 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 main与其他分开,制作静态库和动态库 编写Ma ...

  8. img控件的居中显示 ---js技术

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Other | 十招教你找到海量PPT模板

    转载自:https://www.douban.com/note/330962457/ 问:PPT模板是什么含义? 答: 先假定你们要的是这种网上到处泛滥成灾的主题PPT吧,下面请耐心看到最后,秋叶老师 ...

  10. 转载 STM32 使用Cubemx 建一个USB（HID）设备下位机，实现数据收发

    STM32 使用Cubemx 建一个USB(HID)设备下位机,实现数据收发  本文转载自 https://www.cnblogs.com/xingboy/p/9913963.html 这里我主要说一 ...