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. javascript中创建对象的方式及优缺点(二)

    一.工厂模式 流程: 定义一个函数,函数返回对象. 适用场景: 需要创建多个对象,都是Object类型. 优点:完成了返回一个对象的要求. 缺点: 对象没有一个具体的类型,无法通过constructo ...

  2. Redis总结 C#中如何使用redis

    转载自:https://www.cnblogs.com/zhangweizhong/p/4972348.html 本篇着重讲解.NET中如何使用redis和C#. Redis官网提供了很多开源的C#客 ...

  3. 使用单调队列维护决策三元组实现决策单调性优化DP的一些细节

    以[BZOJ2687]交与并为例给出代码. #include <bits/stdc++.h> #define rin(i,a,b) for(register int i=(a);i< ...

  4. C++入门经典-例5.17-右值引用的定义

    1:右值引用的定义: 类型 && i=被引用的对象: 左值与右值的区别在于,右值是临时变量,例如,函数的返回值,并且无法被改变. 当右值引用被初始化后,临时变量消失. 代码如下: // ...

  5. maven国内镜像、国内外仓库（直接下载jar）

    阿里: https://maven.aliyun.com/mvn/search 官方: http://repo.maven.apache.org/maven2/ maven仓库 阿里巴巴的镜像仓库, ...

  6. 定时刷新指定div层

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. SpringMvc@RequestParam 来映射请求参数

    jsp页面 <a href="springmvc/testRequestParam?username=atguigu&age=11">Test RequestP ...

  8. electron创建窗口常用配置参数

    { "width": 800,//指定窗口的宽度,单位: 像素值. 默认是 800 "height":600,//指定窗口的高度,单位: 像素值,. 默认是 6 ...

  9. 阶段3 2.Spring_07.银行转账案例_9 基于子类的动态代理

    代理一个普通的java类 导入cglib的包 它还有一个asm的依赖.会自动加进来 创建cglib的文件夹.把proxy里面的Client和Producer复制到cglib文件夹 Producer不实 ...

  10. GitHub Port 443 Refused

    最近在本地Github上传和更新远程仓库的时候老是显示 GitHub - failed to connect to github 443 windows/ Failed to connect to g ...