现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。
如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者超时的情况就会发生。
当然了，像采用CDN，或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的，但不是都有这样的条件。
一般都会把图标文件做的尽可能小，尽管如此，1张50k的文件比起50张1k文件下载起来还是很有优势的。
那么，要如何将一个图片中的单个图标显示在页面中，因为没有切分图片的功能。
首先，假设我们的图标图片是tree view中常用的：
做一个简单的页面，放两个div，需要在这两个div上分别显示文件夹和文件图标。
&!DOCTYPE html&
&meta charset="utf-8"&
&div&&/div&
&div&&/div&
显示方法很简单，就是将元素的大小设成图标的大小，图片作为元素的背景，设置图片的left和top让对应的图标被显露出来。
定义一个默认的样式，规定元素的大小，这里的图标是32*32，照样设置元素的大小。
.tree-default{
定义文件夹图标的显示样式，就是讲图标图片作为背景，按照图标的位置调整left和top坐标值。
.tree-folder{
background: url("images/tree_icons_32px.png") -260px -4px no-
定义文件图标的显示样式，调整文件图标所在的位置。
.tree-file{
background: url("images/tree_icons_32px.png") -100px -68px no-
再给元素设上样式。
&div class="tree-default tree-file"&&/div&
&div class="tree-default tree-folder"&&/div&
完成后的效果：
这样的处理也不是没有条件，单张图片也要尽可能的压缩，不是所有的图标都在一张图片上，可将常用的放在一张图片上，如果过多可分成多张图片放置。
所有代码：
&!DOCTYPE html&
&meta charset="utf-8"&
.tree-default{
width:32px;
height:32px;
.tree-file{
background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
.tree-folder{
background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
&div class="tree-default tree-file"&&/div&
&div class="tree-default tree-folder"&&/div&
阅读(...) 评论()君，已阅读到文档的结尾了呢~~
图片超链接 图片超链接代码 如何进行超链接 ppt超链接图片 图片超链接怎么做 图片怎么加超链接 html图片超链接 excel超链接图片 word如何进行超链接 图片设置超链接
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
教你如何对一张图片进行多个超链接
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口用 PS 完美处理两张图片交接处
Forece Blog
用 PS 完美处理两张图片交接处 – Forece Blog}