web前端基础仏学习css精灵css sprite技术解析

下面是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是一项什么技术，以及如何运用了。

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。