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

一 般说来客户端对服务器端进行一次请求就要消耗0.2s左右。如果一个网站的图片，特别是网页素材较多的情况下， 于服务器之间的延迟就很大，而css sprites技术就是通过把素材拼合成一张，然后通过background的position属性来对图像进行定位，这样客服端只需要向服务器进行一次请求就可以把素材下下来，大大加快了网站的载人速度。十里地小工具之家就是通过这种方法来优化速度。举个例子：

<div class=”max”>最大化</div>
<div class=”min”>最小化</div>

这两个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的值。

华丽的Ending。。。

本文来自虾米碗糕转载请注明

Categories: 实用技术 Tags: css

相关日志

• 用Css实现简单的div，图片透明 (1)