html 图片拼接,css sprite图像拼接技术

css图像拼接技术英文成为css sprite是一种比较流行的网页图片处理方式，即将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。

它有其自身独特的优点，但是缺点就是拼接和测量零碎的图片是一项耗时的工作。当你把零碎的图片一块一块拼接好以后还得做的一项工作就是图片的测量，很多人都会选择使用Photoshop的测量工具进行精准的测量，但是这项工作还是比较耗时的。

下面向大家介绍一个方便实用的css图像拼接测量网站 spritecow 精灵牛，你只需将拼接好的图片上传到该网站，它就会根据图片的区块为你自动的测量非常的方便。

使用方法：举一个简单的例子，假设你有四个不同的浏览器图标，用css布局将它们四个图标并排在一起如下图所示：

通常情况下可能我们会将这四个图标单独切出来然后在四个li中附上四个不同的class类 对于html结构可能我们会这样写：

[html]

[/html]

然后根据四个不同的li载入不同的图标css结构：

#browser{

padding-top:20px;

}

#browser ul {

text-indent:-9999px;

width:960px;

margin:0auto;

}

#browser ul li{

float:left;

display:block;

width:142px;

height:139px;

margin-left:60px;

}

#browser ul li a {

text-indent:-9999px;

}

#browser ul li.safari {

background:url(images/safari.png)no-repeat;

}

#browser ul li.firefox {

background:url(images/firefox.png)no-repeat;

}

#browser ul li.chrome {

background:url(images/chrome.png)no-repeat;

}

#browser ul li.ie {

background:url(images/ie.png)no-repeat;

}

这样做浏览器为了加载图像，http就会发出四次请求。如果我们使用css sprite图像拼接技术就会减少三次请求从而大大的节省加载时间。

首先我们将四个图标用Photoshop拼接在一起，并且用魔棒工具将白色的背景删除，即背景必须是透明的因为待会介绍的spritecow是不识别有颜色的背景的

如下图所示

存储为png背景透明格式

打开

这时你就可以对每个图标进行点击，当你点击图标的时候精灵牛就会自动帮你测算出图标背景的水平坐标和纵坐标的距离以及图标的宽度与高度。

哈哈是不是很方便？这时你就可以直接将背景位置的测量值拷贝到css样式中了。以下是使用css sprite图像拼接的样式

#browser{

padding-top:20px;

}

#browser ul {

text-indent:-9999px;

width:960px;

margin:0auto;

}

#browser ul li{

float:left;

display:block;

width:142px;

height:139px;

margin-left:60px;

background:url(images/browser.png)no-repeat;

}

#browser ul li.safari {

background-position:0px–4px;

}

#browser ul li.firefox {

background-position:-169px–4px;

}

#browser ul li.chrome {

background-position:-342px–4px;

}

#browser ul li.ie {

background-position:-517px–4px;

}

说明一下：background-position: 0px -4px no-repeat;  0px 为横坐标，即图标相距最左边的距离，-4px为纵坐，即标图标相距最上方的距离。

这个工具网站可以在很大程度上节省图片拼接所用的时间,当然大家的方法有很多我只是介绍css sprite拼接技术的其中一种简便的方法，如果大家有什么好的方法可以多多交流！