刚开始认真学习CSS的时候,发现一个CSS Sprites教程。后来群里的朋友问起这个问题,我很想把那个教程发给他看看,但是已经找不到了,所以就一直想自己写个CSS Sprites教程。这几天写网页的时候恰巧用到了CSS Sprites,就写出来,分享给各位刚学习CSS的新手,相信你看懂了这个,理解和使用CSS Sprites就不成问题了。
首先解释下CSS Sprites是什么:国内有称CSS精灵,有称CSS雪碧的,不管叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每个图片的坐标,从而达到提升网站加载速度,对开发前段的朋友是必备技能。更详细的解释请点【百度百科】围观。
首先看个例子,里面虽然两个列表样子一样,但是用的显示图片的代码是不一样的。示例:DEMO
如果你是第一次打开这个示例,肯定左边的列表图片是一张一张的显示,右边的列表图片是一起显示,这就是http请求。一张图片就是一个http请求,如果一个网页上面有几百张图片,比如说淘宝首页,那么将会是几百个http请求。再加上同时有很多游客会访问淘宝,这会导致服务器反应速度下降,甚至崩溃。这个时候,CSS Sprites就有很好的表现机会了,他能把不会经常变动的小图标集中到一张图片上,不但减少http请求,而且还降低了图片的大小,加快图片的加载速度。下面是我查看的十张小图的大小:
下面是经过合并成一张图片的大小:
相信大家能清楚的看见相隔有多少倍(不过我不知道是比较“大小”还是比较“占用空间”,不管是哪项,都小了许多)。但是你回头看看上面的DEMO,两个列表里面的图片效果是一样的,并不存在失真的情况,所以大型网站都会运用到CSS Sprites这项技术。
那么CSS Sprites的原理是什么呢?其实就是background-position在起作用。CSS中文手册里面这样解释background-position:设置或检索对象的背景图像位置。说白了,就是定义图片在页面里显示的具体位置,用坐标标注。那么,这个坐标又如何算了?下面有个很好的例子,相信你看了,就会懂的:DEMO
页面里有7个100*100的div,定义的background-position值为:
.d1{background-position:0px 0px;}
.d2{background-position:-50px -50px;}
.d3{background-position:-100px -100px;}
.d4{background-position:-150px -150px;}
.d5{background-position:-200px -200px;}
.d6{background-position:-250px -250px;}
.d7{background-position:-300px -300px;}
很明显,从7组坐标的数值来看,是从原点往右下延伸的,然后你在对比DEMO下面的坐标原图,发现7个div显示的效果却不是从我画的图片原点出发,而是从我画的图片的左上角,一直到右下角。所以你在写background-position坐标时,一定要把大图左上角的点当作原点,然后再来算你需要的图片的坐标。
最常见的拼图就是我最上面给的DEMO,小图标1-10呈竖线形式一顺往下排列,这个时候x轴的值是不会变动的,只要改变y轴值就行,而且y轴的值会越来越小,因为往下面的是负值了。好好想想这个地方,你就能很好的掌握这样一门实用的技术了。
如果不会拼图的朋友,其实网上有提供CSS Sprites样式生成工具,不仅把所有的小图片自动生成大图,而且提供准确的坐标。我前几天下载了一款,效果还是有的,只是合成的图片有些失真,所以就没用了,以后也不打算用,还是自己拼图比较方便。如果有需要的朋友请自行搜索吧。
最后提示几点,background-position的参数是x轴值 y轴值,不懂的参考CSS手册;x,y轴数值一般都≤0,因为图片位于坐标的右下角;拼图一定要设置成透明背景色。
两个DEMO源码下载:点我下载
不错不错,例子还是不够美观~~
我C,要不你来跟我做个好的例子图片啊! 😡
精灵滑动门
给你个例子,不是垃圾评论~~~ ❗
牛逼,居然纯CSS实现,这个要好好研究下。
学习了 增长知识 我喜欢
前几天本来想用这个技术做一个导航,可是发现自己技术还是不行,
所以最后还是将图片分成几个不同的部分
现在懂了吧,可以先做个DEMO尝试下嘛。
这是写给我们小白看的 🙄
不然怎么叫新手教程呢,呵呵
原来这叫做CSS雪碧啊,一直知道有这个方法,想不到有个专有名词~~雪碧哈哈!
因为雪碧的英文就是Sprites嘛,所以也有人叫CSS雪碧
已经应用在主题上了
看来你是个高手啊!
西西最近,忙的很麻,俺来骚扰你了。。。 😈
工作了,肯定没有以前那么闲啊。
学习了 这东西其实有必要看一下的
相当实用的小技巧,只要流量大的网站,都用了这个的。
啊,原来我还不知道有这个,对了 跟你说的那个事情,那本书我真的想看哦 !
日,你有钱去会情况,没钱买书啊,假得很!
我还买了《独唱团》要不要也借你看看? 😈
你都这样说了,我该怎么开口! ❓
妈的,泡妞回来也不跟我带礼物,想借书,你拿什么开口!!! 😎
o 原来你是惦记这个啊 诶 你总不能跟个小娘们似的吧,好多娘们找我要礼物 哈哈!
那到没有,只是在微博上看见你说跟别人带礼物,突然想起来了。
我还缺那钱么 😎
是别人说给我带礼物啦 哈哈哈 你没仔细看 断章取义!
日,还没习惯微博倒着写…
哈哈 好了好了 看到好玩的东西 给你带一个就是!
突出不了我的特点,我可不要!
眼光得放犀利一点哦!
我先搞定css
知道你看书厉害,不过看这种技术书,还是边看边实践。
我就喜欢看例子!~
今年例子大丰收 ❗
这么小 太精彩,我去也去试试
呵呵,大型网站都会用这个的,加载速度快。
我以前就在想 为什么很多门户 图片那么小 我一直认为是自己PS输出有问题 原来是这个原理
我是看见Google首页那个滑动的圆形,才知道有这个技术的。
只是不想动手拼图。。。还是找工具吧
如果我找到不失真的拼图工具,第一时间分享
呵呵..不错啊..连这些都能做出来了。。
其实CSS很强大的,我还有好多东西都没见过呢。
上次的主题好像有用到 不过自己搞不定
这个对作图还是有一点的要求的。
精彩的地方怎么可以少了我呀
大哥又来了啊,你那博客少儿不宜,我还单身呢
玩个点名游戏吧?有兴趣不?http://www.longzaivision.com/?p=714
抱歉,我不玩那个,不想把自己搞得太透明,保留点神秘感比较好 😆
最近刚好想关注一下css sprite,关注博主更新~
我也只是正好做网站用到这个,就发一下,以后自己忘记了也好复习嘛
这个 我看过 很毒鼠标放上去动态变换的 也是靠这个技术 对吧 呵呵
你说的是Google首页吧?那个确实是用这个,全部图片都在一张大图上。
属于技术贴,菜鸟来存粹支持了。
我也只是记录一下,防止以后忘记了。
呵呵,大小是实际字节数,不会变化。占用空间是在硬盘上使用的空间数,根据簇大小会有变化
这个到不是很懂,以前记得就一个参数的,容易看。
很白的村长要好好看看。。
你不会代码,还是不要看为好,面得越看越昏迷
博主写的很用心,赞一个,继续加油哦,关注
纯属支持,来踩,来顶!多点生活类的多好啊,呵呵
文笔不怎么好,生活很单调,不知道要写什么 ❓
我是来骚扰的、、、 😀
骚扰个P,看你的独唱团去
西门写的不错,这几天我也研究css sprite呢,刚才“苏扬 ”在我博客那边提到西门你这边有这样的实例,就过来看看。现在我那边有几篇很经典的关于css sprite的文章,不过都是转载的,我有时间也把心得写一下。
看了你下,你那输入高手阶段了,而我这写的是新手如何理解CSS Sprites这个技术而已。因为我就是通过类似的一个坐标图片来理解的。
头一次听到CSS Sprites,长知识了
这个技术很常用,只不过名字陌生而已。
😎 虽然还不是很明显 不过似懂非懂了