用css sprites（图像拼合技术）优化css加快网站速度[转]

最新推荐文章于 2025-02-23 21:53:27 发布

weixin_34128411

最新推荐文章于 2025-02-23 21:53:27 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sharmy/archive/2009/02/23/1396537.html

本文介绍了一种减少HTTP连接请求数的方法——CSS Sprites技术。通过将多个小图片合并成一个大图片，并利用background-position属性显示指定部分，以此降低网页加载延迟。

一般说来客户端对服务器端进行一次请求就要消耗0.2s左右。如果一个网站的图片，特别是网页素材较多的情况下，于服务器之间的延迟就很大。利用CSS 图片拼合 (CSS sprites) 可有效降低图片文件的 HTTP 连接请求数。多个图片将以一定间距合并为一个大图片文件。页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置。
例子：

这两个class都使用同一个图片：

.min, max {
width:16px;
height:16px;
background-image:url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);
background-repeat: no-repeat; //我们并不想让它平铺
text-indent:-999em; //隐藏文本的一种方法
}

效果如下：

最大化最小化
最大化最小化
我们看到一团灰，没错，因为我们还没有指定background-position，默认为 0 0，可以看下 sprite.png , 处于这个位置正是灰块。好了，我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量，最大化按钮位于Y轴的350px处，最小化按钮位于 Y轴400px处。想一想我们如何才能让它们能够显示出来呢，明显，要向上提升sprite.png，得到代码如下：

.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}

就是这么简单，不过相信最麻烦的就是定位像素的问题，没事推荐个网站Web performance.这个能很轻松的帮你合成一张图片并帮你定位background-position的值。

转载于:https://www.cnblogs.com/sharmy/archive/2009/02/23/1396537.html