关键词：
雪碧图是根据CSS sprite音译过来的，是将很多很多的小图标放在一张图片上。
使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。
把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。
我们来看看实现条件:
1.要有装图片的容器宽高
2.引用背景图的文件
3.精准定位改图(background-position的值（默认为（0，0）)
例如:要使用此图片的第一个为图标,并且鼠标悬停变成第二个红色
html代码:
书写装小图片的容器,我这里用<i>标签
cssd代码:
在css中需要这是该图片的宽高,用Photoshop可以测量,我这里用的是行内元素,要设置宽高需要转块
完成的效果如下:
当鼠标悬停时变色
对应刚刚<i>的类名small-icon1施加样式
对应css代码:
当鼠标悬停显示的是红的的小图标则需要定位到红色的位置,那我们 需要测量出X Y轴的位置,0,0为起点,向上移动则x为负数.
效果如下:
想要实现哪一个图片就定位拖的位置,书写代码例,position:-22px -40px;
css-sprite（雪碧图精灵图）
CssSprite（优点）减少图片的字节。减少网页的http请求，从而大大的提高页面的性能。解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效... 查看详情
移动端雪碧图sprite的实现
移动端适配的时候，通常是用rem作为长宽单位，因此，在不同的设备下，元素的实际宽高（px）是不一样的，如果是单张图片作为为背景图片的时候，最为方便，只要设置背景图片的属性background-size:contain|conver|100%;都能够将图片... 查看详情
移动端适配之雪碧图(sprite)背景图片定位
...站的访问速度，我们一般都会把一些小的图片合并成一张sprite图，然后根据background-position来进行定位。在web端由于是固定的大小与left、top，所以定位起来会比较准确、简单。但是在移动端就不一样了，各种手机的屏幕大小不一... 查看详情
什么是雪碧图？它的优缺点是什么？
...lt;metacharset="UTF-8"><title>Document</title><style>.sprite/*1.定视口*/width:180px;height:180px;border:1pxsolid;/*2.插图*/background-image:url("../img/sprite.jpg");.sprite:hover/*3.移动位置*/background-position:-822px-269px;</style></head><body><!-... 查看详情
移动端适配之sprite雪碧图背景定位
...，最后将所有px值转换为rem，但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右)，如果公司要求不高倒也无所谓，但是我不能忍啊。 方法就是利用background-position百分比值替换rem值 要想得到定位的百分比值（nm）... 查看详情
在rem单位下使用雪碧图实现自适应
参考技术A雪碧图是根据CSSsprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏... 查看详情
移动端rem布局背景图片使用以及sprite雪碧图
现在移动端页面用rem布局已经是一大流派了，成熟的框架如淘宝的flexiable.js，墨尘写的更轻量级的hotcss。用rem作单位使得元素能够自适应后，还有一块需要关注的，那就是背景图片。rem布局所谓rem布局就是指为文档的根节点<ht... 查看详情
前端工程师技能之photoshop巧用系列第五篇——雪碧图
...hotoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点： 【1】减少http请求... 查看详情
雪碧图
...考。这篇文章转载自：http://www.hongkiat.com/blog/compass-image-sprite/作者ThoriqFirdaus译者zEx前端性能优化，一直是前端开发中非常重要的一环，而其中静态资源特别是图片的优化，又占据了 查看详情
简单的使用gulp生成雪碧图
有一个在线工具：https://www.toptal.com/developers/css/sprite-generator。生成雪碧图是极其方便的。现在呢，我们来试试用gulp来生成雪碧图。第一步：去淘宝镜像地址（http://npm.taobao.org/）里安装cnpm。$npminstall-gcnpm--registry=https://registry.npm.ta... 查看详情
sprite学习
...，按钮集中在一起，可以提高维护性。在这里介绍一款CSSSprite自动生成工具——CssGaga，可以快速生成雪碧图。在实际制作中，遇到很多的坑，现在总结下：1. 坑一 查看详情
csssprite雪碧图
一、CSSSprite雪碧图使用场景浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显，为了解决这个问题，可以将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图... 查看详情
雪碧图应用
最近学习了雪碧图的使用，雪碧图的好处这块就不多说了，只说应用部分。雪碧图的使用依赖于background-position这个属性，属性值分别为x,y轴的值，图片的显示大小由容器决定，简单点说，就是承载该图片的大小是多大显示区间... 查看详情
雪碧图（图片拼合技术）
雪碧图(sprite)是一种图片拼合技术；使用方法：1.定视口width:xxpx;height:xxpx;2.插图background-image:url("图片路径");3.移动位置background-position:x轴坐标y轴坐标；优点：将小图标拼合到一张图片里，占用内存少，对开发人员来说就不用麻烦... 查看详情
csssprite雪碧图的应用
雪碧图1.静态图片不随用户信息变化而变化2.小图片，图片容量比较小3.加载量比较大一些大图不建议使用雪碧图 工具CssGaga <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>雪碧图导航</title>... 查看详情
css雪碧图及jquery定位代码
...腾。这是怎么实现的？后来询问得知，这是css精灵技术（sprite）也叫雪碧图。 CSS知识点：background-imagebackgorund-position特点：相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片 查看详情
玩转html5移动页面
...的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！网上的工具有一些可以帮助你生成雪碧图的工具，例如CssGaga，GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。特别地，如果单张雪碧图面积实在太大，可... 查看详情
canvas动画原理与fabric实现
...在Canvas中绘制动画效果。在HTML5的Canvas中结合JS可以绘制雪碧图动画，动画在一些H5游戏中或者富交互的应用中被广泛使用。游戏的动画帧可以在一个单独的图片中保存，然后使用HTML5的Canvas结合JS在特定的时间点来绘制特定的内... 查看详情