css sprite技能解析

提到css sprite技能第一次触摸仍是在百度站长东西中网站检测时看到到，说这个技能能够削减网站图片恳求次数，其时还不是很了解，之后了解了一番，了解了其间的原理，故在此给咱们共享一下。

　CSS Sprites在国内许多人叫css精灵，是一种网页图片运用处理办法。它答应你将一个页面涉及到的一切零散图片都包含到一张大图中去，这样一来，当拜访该页面时，载入的图片就不会像曾经那样一幅一幅地渐渐显现出来了。关于其时网络盛行的速度而言，不高于200KB的单张图片的所需载入时刻基本是差不多的，所以无需忌惮这个问题。　　加快的要害，不是下降分量，而是削减个数。传统切图考究精密，图片标准越小越好，分量越小越好，其实标准巨细无所谓，核算机一起都按byte核算。客户端每显现一张图片都会向服务器发送恳求。所以，图片越多恳求次数越多，形成推迟的或许性也就越大。

　CSS Sprites其实便是把网页中一些布景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行布景定位，background-position能够用数字能准确的定位出布景图片的方位。
下面我就详细的解说下他的运用技巧，包你现在不了解的童鞋会有个清楚的全新了解，尽管现在有这样的东西，可是仍是要先清楚他的原理，技巧性的来做也会很快速的完结定位，下面我共享加个事例。

首要跟咱们阐明一点，因为需求定位的布景都是合并在一张图的，所以都是一刀切的，要么是X轴坐标一起要么是Y轴坐标一起，也就有了我下面要叙述的2种类型了。

1。横向定位坐标
横向定位坐标意思便是Y轴坐标固定,它的特色便是每个图标的高度是一起的，经过改动x坐标的方位来改动布景。只需丈量每个图标的宽度就能够知道x轴的坐标了。假如你还不知道这个规则，下面我就解说给你听吧，下面拿我做的2个事例来说事。
作用图：

博学谷

实践布景图：

那么详细来解说怎样来定位，这儿是改动X坐标来定位。

因为高度都是相同所以Y轴上的坐标都是0或top
这儿每个图标我是用一个span做布景的，下面详细分析下代码：
下面是Css code:

.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
.facebookLogo{background-position:0 0;width:20px;}
.pinterestLogo{background-position:-20px 0;width:42px;}
.twitterLogo{background-position:-62px 0;width:30px;}/**/
.flickrLogo{background-position:-92px 0;width:130px;}
.youtubeLogo{background-position:-222px 0;width:98px}
.blogLogo{background-position:-320px 0;width:84px;}
.sl{float:left;padding-right:10px;}

他们的布景图片都是共用这一张布景：background-image:url(../images/shareIcon.jpg);
每个元素的布景都不答应重复：即：background-repeat:no-repeat;
读到这儿你有发现一个规则，便是每个元素的坐标等于前面元素的坐标值加上宽度。即元素的横向坐标值公式等于。相邻元素的坐标值加上宽度。
pinterestLogo 的值等于facebookLogo的坐标值20px+facebookLogo的宽度20px ;是不是很简单啊，只需你知道元素的宽度就能够，因为横向坐标等有必要要给个固定的宽度，所以这一步丈量宽度不是浪费时刻。期望仔细看源码中坐标值的规则。
不管是横向定位与纵向定位坐标的时分，他们的开端方位都是background-position:0 0;而横向定位的时分高度是固定的，所以每次只需改动X坐标的值就完结了。
比方facebook的logo是开端方位的图标，所以它的坐标值是0,0，就完结了它的定位。
那么pinterest的logo是它的下面一个，便是从facebook的宽度负值算起。因为facebook的宽度是21px;所以pinterest的logo坐标便是background-position:-20px 0; 下面以此类推twitterLogo 是pinterstLogo的下面一个，那么便是用pinterstLogo的坐标值加上pinterstlogo的宽度,就得到了twitterLogo的坐标方位了。便是-（20px+42px）=-62px;即twitterLogo 的坐标为.twitterLogo{background-position:-62px 0;width:30px;}读到这儿你有发现一个规则，便是每个相邻元素的坐标等于前面元素的坐标值加上它前面元素的宽度。即元素的横向坐标值公司等于。相邻元素的坐标值加上它的宽度。好了下面讲第二种计划了。

实践布景图片：

ul{margin:0;padding:0;float:left;width:32px;}
ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
.f{background-position:0 0;height:32px;}.p{background-position:0 -32px;height:20px}/*Y轴坐标等于开端方位的高度即：-（0+32）*/
.fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即：-（32+20） */
.h{background-position:0 -84px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度*即：-（52+32）*/
.t{background-position:0 -116px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度，即：-（84+32）*/

3.宽度和高度都持平的时分，那是最好不过了，直接做乘法，相信你的数学才能一家过了小学3年级了，Ok，仍是来共享下吧。

1.宽度高度想等的状况下等位X轴坐标，这种状况一般都出现在一组按钮下，鼠标滑过和点击时分的布景改动。这种状况我也总结出来了，有公式：X轴坐标=-n（开端方位+宽度）.其间n值从0开端。即一切的开端方位的坐标都是0,0开端起。下面顺次类推。

比方你现在所要定位的元素是第3个，假定咱们这儿的图标的宽度为30px.那么他的X轴坐标就等于。x=-3*(0+30px);Y轴的坐标=-n(开端方位+高度)

比方你现在所要定位的图标为第6个方位，假定这儿的高度也是32px;那么他的Y轴坐标便是Y=-6（0+32px）=-192px.

到此，咱们应该也了解CSS Sprite是一项什么技能，以及怎样运用了。
最后送一点福利给咱们， CSS 图片拼合生成器

CSS 图片拼合生成器（英文名为css sprite generator），是一款支撑多言语的免费CSS图片拼合生成器，现在支撑18种言语（包含简体中文）。该在线东西十分易用，你只需求上传你需求拼合的CSS图片压缩包，设置重复图片处理办法，调整原图巨细，拼合图片输出设置参数，CSS输出选项即可生成CSS拼合图片和CSS文件。

css sprite generator是BETWAY登录规划师高效率的在线东西首选。