用CSS Sprites合并WordPress表情图片教程

自由人 — Tue, 11 May 2010 13:29:11 +0000

用CSS Sprites将WordPress表情图片合并为一个文件这个想法其实我很早就有了，我已经在别的网站上见到这样的应用了（比如人间网就用了这个技术）。

那么这个方法有什么好处呢？

我想这个方法最大的好处就是大大减少了HTTP Request数量（要知道一般博客上面如果有表情的话，那么表情图片的数量少则有7、8个，多则可达20+，像我之前就用了24个）以及图片的大小（以前我24个GIF图是36K+，现在则只有一个大小为4.74KB的xiaonei.png），这对于大流量的网站的好处是显而易见的。

[阅读全文...]

CSS Sprites技巧:单个图片插入多个链接

自由人 — Wed, 03 Mar 2010 05:24:48 +0000

平时我们做网页的时候会用到img标签来插入图片，再结合a标签可以给图片加上链接，但是其实单独用a标签就可以实现这样的效果，而且可以在单个图片中插入多个链接。

本文的基本做法就是用CSS Sprites将多个图片合并为1个，用CSS中的background属性代替img标签，用background-position来实现多个图片链接的最终效果。

例如原来3个图片链接的HTML代码如下

[阅读全文...]

您可能也喜欢这些文章：
CSS Sprites技巧:单个图片插入多个链接	WordPress表情不会动了？怎么回事？	CSS 盒模型概述	小站表情图片使用情况统计	WordPress折腾记-精简CSS及JS在插件中的调用
无觅

您可能也喜欢这些文章：
用CSS Sprites合并WordPress表情图片教程	CSS代码命名及书写规范篇	CSS 盒模型概述	CSS中的块级元素与内联元素	写规范CSS代码避免浏览器解析错误
无觅

Zenoven 自由人 » CSS Sprites

用CSS Sprites合并WordPress表情图片教程

CSS Sprites技巧:单个图片插入多个链接