css sprite图片优化技术

sprite图片优化技术

BY ADMIN · 2013 年 4 月 20 日

当站点中出现了大量的图标、按钮背景之类的东西，直接用img写在页面上是最为笨拙的办法，毕竟为了取悦搜索引擎，我们还需要为每个图标都设置好alt及宽高属性。如果将其写进css的话，也仅仅可以使其作为背景存在，或者作为li标签存在。但有时，这种做法并不是那么的方便，比如很多时候为了这些图标而不得不写很多原本无用的div层或者list结构。
今天我们所讲的css sprite说的直观些，就是将所有的图标和按钮背景等页面上静止的东西全部放到一张图片中去，然后再利用css进行x轴和y轴的定位，从而将其中的一张显示出来。这也有些像是ps的裁切工具，当我们使用background-position来实现时，这个属性就像是在裁切、根据坐标可任意裁切出我们需要的部分。
首先我们要记住的一点是，CSS Sprites只能使用到固定大小的box里，这样才能够遮挡住不应该看到的部分，否则页面绝对会猥琐。
下面让我们先来看一个小例子，以便我们能够更快的掌握住这门技术，当然这个技术的技术成分并不大，只要能找准坐标，谁都可以实现。
比如我们下面这段代码，max代表最大化，min代表最小化，我们需要给它们配上相应的图片，div结构如下所示：

最大化

最小化

为了简化教程，这两个div我们都使用了相同的图片，下面是css中的代码：

.min, .max {
width:16px;
height:16px;
background-image:url(images/xmlas.png);
//图片路径，自己调整
background-repeat: no-repeat;
/*我们并不想让它平铺*/
text-indent:-999em;
/*隐藏文本的一种方法*/
}

通过上一段代码的操作后，你或许会发现，你所需要的图标并没有如想象中的那般完美的显示出来。这是因为我们还没有指定background-position属性，其默认值为0 0；因此才会出现错位甚至无法显示的现象，只要我们调整好其数值，这个问题便可以解决了，请看下面一段示例代码：

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

就是这么简单，关键还是要看你怎么去处理图片，我们建议是使用png格式的图片，并且背景最好是完全透明的，而且各个图标之间的距离稍微拉的远一些，这样才能最大化的保证它可以兼容于各个浏览器。
使用css sprite技术可以合并一部分静止的图片，从而减少了http请求，提升了页面的响应速度，在百度的seo建议中和站长工具中都有这一项设置，并且各个巨头网站都使用了这个技术，因此你还有啥理由不用的呢？