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. css grid 随笔

    原文出自Arien的博客https://www.w3cplus.com/css3/line-base-placement-layout.html 首先定义一个网格 1.可以给父容器的display属性 ...

  2. javascript中继承方式及优缺点(三)

    文以<JavaScript高级程序设计>上的内容为骨架,补充了ES6 Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,希望大家能有所收获. 1. 继承分类 先来个整体印 ...

  3. ABP .net Core MQTT+signalr通讯

    abp版本: 4.3.0.0 .net core 版本 2.2 1.Mqtt 1.1 添加程序集:M2MqttDotnetCore(差点以为没有.net core 的) 2.2 实现代码:抄了个单例模 ...

  4. 安卓项目集成objectbox-java数据库框架教程（非关系型）

    objectbox数据库是greenrobot团队开发的全新非关系型数据库框架,该团队还开发过greenDao,EventBus等热门框架,objectbox可能是第一次听说,但是greenDao,E ...

  5. Zookeeper 选举过程

    Zookeeper 选举过程 问题 选举过程 服务器之间是怎么通信的? 答:QuorumCnxManager使用TCP-socket实现选举过程中的连接通信 Leader的选举过程在什么时候实现? L ...

  6. Eclipse控制台输出中文乱码问题的解决

    啥都不说,上图: 1.console控制台打印乱码 2.右键: Run As --> Run Configurations 3.找到common项,在“Encoding”栏,看到当前用的是默认“ ...

  7. MQTT协议 Websocket JS客户端

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  8. 2019Java第十三周课程总结

    这周主要是学习了监听器还有制作记事本,主要可以由一下代码来体现 监听器 实验代码 package text12; import java.awt.Container; import java.awt. ...

  9. 在electron中使用sqlite：sql.js简介

    在electron中使用sqlite:sql.js简介 在开发electron应用的时候如果想要使用sqlite3,步骤上除了npm安装以外还要rebuild,比较麻烦.如果你想找一个开箱即用的sql ...

  10. jdbcTemplate的queryForList的使用方法

    jdbcTemplate的queryForList的使用方法如下,它不一样的地方是,它获得的结果,会再放到一个map里去: List rows = jdbcTemplate.queryForList( ...