网页中多个图标在一张图片上，使用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将各图标显示的更多相关文章
- 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript
需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...
- 网页中嵌入可以点击“运行代码”执行html/css/js代码
html代码 <textarea name="textarea" cols="60" rows="10" id="rn01& ...
- 网页中NPIO对Excel的操作实例
上一节是在wpf中实现对excel的操作方法,这一节看看网页中如何封装实现对excel的上传导入和下载保存的. 看看效果图:
- 在网页中添加google搜索
网页中插入谷歌搜索,至于怎么上谷歌,后面有时间会更,推荐百度 <form method="GET" action="http://www.google.com.hk ...
- 一步步打造自己的纯CSS单标签图标库
图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...
- 微信小程序多张图片上传
微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...
- 字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...
- 在网页中制作icon图标
用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
随机推荐
- 剑指Offer面试题：32.数字在排序数组中出现的次数
一.题目:数字在排序数组中出现的次数 题目:统计一个数字在排序数组中出现的次数.例如输入排序数组{1,2,3,3,3,3,4,5}和数字3,由于3在这个数组中出现了4次,因此输出4. 二.解题思路 2 ...
- Hadoop学习笔记—7.计数器与自定义计数器
一.Hadoop中的计数器 计数器:计数器是用来记录job的执行进度和状态的.它的作用可以理解为日志.我们通常可以在程序的某个位置插入计数器,用来记录数据或者进度的变化情况,它比日志更便利进行分析. ...
- Hadoop学习笔记—16.Pig框架学习
一.关于Pig:别以为猪不能干活 1.1 Pig的简介 Pig是一个基于Hadoop的大规模数据分析平台,它提供的SQL-LIKE语言叫Pig Latin,该语言的编译器会把类SQL的数据分析请求转换 ...
- Orchard 微软CMS项目介绍
我之前的项目中使用了Orchard, 它依据依赖注入的思想而做的模块化让我深深为之着迷,这里开始宣传一下这个架构. 包含的概念非常之多,我现在也不甚了解.Orchard就是自己想控制它改变它的话需要非 ...
- 使用shell/python获取hostname/fqdn释疑
一直以来被Linux的hostname和fqdn(Fully Qualified Domain Name)困惑了好久,今天专门抽时间把它们的使用细节弄清了. 一.设置hostname/fqdn 在Li ...
- CCLuaLoadChunksFromZIP加载后的require路径问题
对于require来说,在LUA中的机制就是搜索path路径了.但对于CCLuaLoadChunksFromZIP加载的LUA文件来说,require的路径又是怎么样的呢? 我在服务器上有一个 oox ...
- delegate、notification、KVO场景差别
delegate: 编译器会给出没有实现代理方法的警告 一对一 使用weak而不是assign,或者vc消失时置为nil 可以传递参数,还可以接收返回值 notification: 编译期无法排错 一 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...
- myeclipse转到函数定义的方法去
转到函数的定义CTRl+鼠标左击 myeclipse自动补全的快捷键 alt+/
- 轻量级前端MVVM框架avalon源码分析-总结
距avalon0.7版本发布有一段时间,由于之前的稳定性,就停止一段时间更新,期间研究了下Knockout源码,也尝试写了一个小型的mvvm的实现模型,仅仅只是仿造ko的核心实现,把无关的东西给剥离掉 ...