前台开发入门到实战：使用CSS样式显示多个图标图片
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这的确很常态。
假如，网站是挂在外网上，或者者网速过低，又大量使用图标的情况下，因为浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者者超时的情况就会发生。当然了，像采用CDN，或者者按照浏览器的并发数对图片文件进行域名分散存储解决也是再好不过的，但不是都有这样的条件。
一般都会把图标文件做的尽可能小，虽然如此，1张50k的文件比起50张1k文件下载起来还是很有优势的。那么，要如何将一个图片中的单个图标显示在页面中，由于没有切分图片的功能。
首先，假设我们的图标图片是tree view中常用的：
做一个简单的页面，放两个div，需要在这两个div上分别显示文件夹和文件图标。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <div></div> <div></div> </body></html>显示方法很简单，就是将元素的大小设成图标的大小，图片作为元素的背景，设置图片的left和top让对应的图标被显露出来。
定义一个默认的样式，规定元素的大小，这里的图标是32*32，照样设置元素的大小。
.tree-default { width:32px; height:32px;}定义文件夹图标的显示样式，就是讲图标图片作为背景，按照图标的位置调整left和top坐标值。
.tree-folder { background: url("images/tree_icons_32px.png") -260px -4px no-repeat;}定义文件图标的显示样式，调整文件图标所在的位置。
.tree-file { background: url("images/tree_icons_32px.png") -100px -68px no-repeat;}再给元素设上样式。
<div class="tree-default tree-file"></div><div class="tree-default tree-folder"></div>这样的解决也不是没有条件，单张图片也要尽可能的压缩，不是所有的图标都在一张图片上，可将常用的放在一张图片上，假如过多可分成多张图片放置。
所有代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> .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; } </style> </head> <body> <div class="tree-default tree-file"></div> <div class="tree-default tree-folder"></div> </body></html>为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为前台工程师，乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前台全栈学习圈：784783012 欢迎大家进群交流探讨，学习交流，共同进步。
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终白费大量时间，所以有效资源还是很有必要的。
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台开发入门到实战：使用CSS样式显示多个图标图片
