多个图标图片（雪碧图）使用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>
多个图标图片（雪碧图）使用CSS样式显示的更多相关文章
- css雪碧图（css splite）
将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0
- Css雪碧图
Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...
- css雪碧图制作
使用css背景合并工具cssSprite 工具下载链接: http://download.csdn.net/download/wx247919365/8741243 1.选择文件 2.生成雪碧图 3. ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- css雪碧图（精灵图）与字体图标的介绍以及对比
css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...
- css 雪碧图 及jquery定位代码
无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...
- 前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- vue-cli3使用webpack-spritesmith配置雪碧图
一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webp ...
- webpack使用雪碧图插件
1.先安装插件 npm install --save-dev webpack-spritesmith 2.配置webpack 配置之前 先引入var SpritesmithPlugin = requi ...
- css之background-position属性实现雪碧图
什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分 ...
随机推荐
- mahout过滤推荐结果 Recommender.recommend(long userID, int howMany, IDRescorer rescorer)
Recommender.recommend(uid, RECOMMENDER_NUM, rescorer); Recommender.recommend(long userID, int howMan ...
- Spring入门第六课
XML配置里的Bean自动装配 Spring IOC容器可以自动装配Bean.需要做的仅仅是在<bean>的autowire属性里指定自动装配的模式 ByType(根据类型自动装配):若I ...
- C# 绘制图表（柱状图，线性图，饼状图）
http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series[" ...
- 【linux学习-centeros】
1:linux的目录结构: / root —?启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home —?存储普通用户的个人文件 ftp — 用户所有服务 httpd sa ...
- IOHelper（自制常用的输入输出的帮助类）
常用的读写文件,和地址转换(win和linux均支持),操作文件再也不是拼接那么的low了 using System; using System.Diagnostics; using System.I ...
- 微信小程序分列显示数据
效果图 wxml代码 <view class='onehandle5'> <block wx:for="{{3}}" wx:for-index="k&q ...
- Unity技术支持团队性能优化经验分享
https://mp.weixin.qq.com/s?__biz=MzU5MjQ1NTEwOA==&mid=2247490321&idx=1&sn=f9f34407ee5c5d ...
- javascript基础工具清单
- Pycharm自动部署项目
Pycharm自动部署项目 大家好呀,又有几天不见各位了.断更了几天,给大家说声抱歉.清明节大家都挺忙的,有扫墓祭祖的,也有趁小长假去游玩的. 所以,在节后,更新也会照常进行,继续给大家分享本人的一些 ...
- Visual Studio 2017&C#打包应用程序详细教程，重写安装类获取安装路径
Visual Studio搞了个Click One,在线升级是方便了,但对于俺们这苦逼的业余程序猿就... 别着急,折腾一下,还是能做出打包安装程序的.请移步CSDN看smallbabylong的文章 ...