摘要：
在google中搜索一下css sprites这个名称，会查出很多信息，并且随着SEO越来越被人们重视，采用这种技术来进行图片优化的网站越来越多，国内几家大型门户网站无不仿效。如新浪，网易，搜狐。你下载一下他们的网站上的图片，你会看到他们将很多小图片全部集成在一张图片上。 这样做的好处是不言而语： 1. 加速图片显示 2. 利用CSS技巧减小HTTP请求 3. 利于网站优化seo 其实原理非常简单，主要是应用css中的背景定位技术来实现的。主要就是用一个属性background-position来控制显示一张大图片中的一个指定大小的图片位置。 下面从一个比较有趣的例子来一步步动手制作一幅扑克牌 阅读全文
摘要：
这段时间有几次接触到了css sprites的概念，一个就是在用css做滑动门的时候，另外一个就是在用YSlow分析网站性能的时候，于是对css sprites这个概念产生了浓厚的兴趣。在网上查找了很多的资料，但可惜的是大部分都是只言片语，其中很多都是直接翻译国外的资料，也有直接推荐国外的资料网站，无奈英语没有过关，基本上没有理解到什么css sprites，更别谈如何使用了。最后还是在蓝色理想中的一篇文章受到启发，琢磨了老半天，才算弄清楚里面的内涵，下面将通过本人的理解帮助其他人更加快速的去掌握css sprites。先简单介绍下概念，关于它的概念，网上那到处都是，这里简单的提下。什么是cs 阅读全文
摘要：
原文链接：http://zhuweiwu.com/?p=18CSS中背景图片的定位有三种方法：（1）关键字：background:url(img.jpg) top left; (2)像素：background:url(img.jpg) 0px -22px; (3)百分比：background:url(img.jpg) 50% 50%。最近刚做了像素方面的定位，所以在此分享像素的定位。 CSS中背景定位中的像素其实是图片左上角在显示的区域内的坐标（以显示区域左上角为原点，上边向右为x轴，左边向下为y轴如下图） 下面以本人做的Rss订阅来说明。图中人人网订阅图标的左上角距离整个图标的左上角的距离为 阅读全文
摘要：
如今做网页为了使网站丰富多彩，富于表现力，往往需要应用大量的图片/图标。如何处理这些图片，使其尽量不影响网页载入，解析等速度，是一个不大不小的问题。如果你的网站用各种图标图案装饰的靓丽无比，但是需要等待较长的时间加载，那么相信很多用户会等不及而离开。尽量将图片做的小些，可能是大部分人选择的解决之道。但是100张1kb的图片加载与一张100kb的图片加载，这之间又是不同的，这涉及到网站服务器的同时连接数，网络质量等。但是，显然，加载一张图片要远比加载多张图片简便的多。 还有最重要的一点，就是涉及到用户动作才表现的图片，例如鼠标移上/移下的图片切换，由于是由动作触发的，所以在动作触发前是不会加载的 阅读全文