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. Nowcoder 北师校赛 B 外挂使用拒绝 ( k次前缀和、矩阵快速幂打表找规律、组合数 )

    题目链接 题意 : 中文题.点链接 分析 : 有道题是问你不断求前缀和后的结果 Click here 这道题问的是逆过程 分析方法雷同.可参考 Click here ----------------- ...

  2. Nowcoder Removal ( 字符串上的线性 DP )

    题目链接 题意 : 给出长度为 n 的字符串.问你准确删除 m 个元素之后.能产生多少种不同的子串 分析 ( 参考博客 ):  可以考虑线性 DP 解决这个问题 试着如下定义动态规划数组 dp[i][ ...

  3. poj 3662 Telephone Lines dijkstra+二分搜索

    Telephone Lines Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5696   Accepted: 2071 D ...

  4. spring aop 实现controller 日志

    @Aspect @Component @Slf4j public class ControllerAspact { @Pointcut("execution(public * com.exa ...

  5. AcWing：139. 回文子串的最大长度（字符串Hash + 前缀和 + 后缀和 + 二分）

    如果一个字符串正着读和倒着读是一样的,则称它是回文的. 给定一个长度为N的字符串S,求他的最长回文子串的长度是多少. 输入格式 输入将包含最多30个测试用例,每个测试用例占一行,以最多1000000个 ...

  6. mui 二维码扫描功能

    mui 扫一扫识别二维码 以及多次扫码后从结果页返回时黑屏问题解决  扫一扫页面全部代码 <!doctype html><html>     <head>      ...

  7. 设置centos7界面语言为中文

    1.在终端中输入命令 vim ~/.bashrc 来编辑“.bashrc”文件 2.在最后添加“ export LANG="zh_CN.UTF-8"  ” 3.执行 sudo sh ...

  8. [CSP-S模拟测试]:真相（模拟）

    题目传送门(内部题106) 输入格式 第一行为一个正整数$T$,表示数据组数. 接下来$T$组数据,每组数据第一行一个正整数$n$表示$OIer$,接下来$n$行,第$i$行表示编号为$i$的人所说的 ...

  9. IDEA无法自动导入HttpServlet包问题解决

    全部都报红,连Alt + Enter都没有提示导包 这时候只需要IDEA右上角的这个键 再点击Libraries 选择添加 → Java 再把你Tomcat中对应的servlet-api.jar添加进 ...

  10. Docker入门-构建第一个Java程序

    定制镜像 准备一个没有第三方依赖的java web项目,可能参考示例maven结构项目: session-web.war 把该war上传到安装有docker软件的服务器上宿主目录下.在同级目录创建Do ...