现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。

如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是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将各图标显示的更多相关文章

  1. 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

    需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...

  2. 网页中嵌入可以点击“运行代码”执行html/css/js代码

    html代码 <textarea name="textarea" cols="60" rows="10" id="rn01& ...

  3. 网页中NPIO对Excel的操作实例

    上一节是在wpf中实现对excel的操作方法,这一节看看网页中如何封装实现对excel的上传导入和下载保存的. 看看效果图:

  4. 在网页中添加google搜索

    网页中插入谷歌搜索,至于怎么上谷歌,后面有时间会更,推荐百度 <form method="GET" action="http://www.google.com.hk ...

  5. 一步步打造自己的纯CSS单标签图标库

    图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...

  6. 微信小程序多张图片上传

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...

  7. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  8. 在网页中制作icon图标

    用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...

  9. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

随机推荐

  1. .NET面试题系列[10] - IEnumerable的派生类

    .NET面试题系列目录 IEnumerable分为两个版本:泛型的和非泛型的.IEnumerable只有一个方法GetEnumerator.如果你只需要数据而不打算修改它,不打算为集合插入或删除任何成 ...

  2. [.net 面向对象程序设计进阶] (20) 反射(Reflection)（上）利用反射技术实现动态编程

    [.net 面向对象程序设计进阶] (20) 反射(Reflection)(上)利用反射技术实现动态编程 本节导读:本节主要介绍什么是.NET反射特性,.NET反射能为我们做些什么,最后介绍几种常用的 ...

  3. 使用shell/python获取hostname/fqdn释疑

    一直以来被Linux的hostname和fqdn(Fully Qualified Domain Name)困惑了好久,今天专门抽时间把它们的使用细节弄清了. 一.设置hostname/fqdn 在Li ...

  4. Linq操作非泛型集合

    我们都知道,Linq能查询泛型集合,确切的说是:LINQ能实现查询泛型对象或者实现了IEnumerable.但是,很遗憾的是诸如ArrayList这样的非泛型集合并没有实现IEnumerable.那咋 ...

  5. Step by step 如何创建一个新森林

    原创地址:http://www.cnblogs.com/jfzhu/p/4006118.html 转载请注明出处 创建一个新森林就是在一台计算机上安装AD DS,并将这台计算机提升为域控制器. 演示环 ...

  6. failed to load the jni shared library jvm

    启动eclipse luna时候出现的, 原因在于,eclipse要求jdk是 32位的, 而我本机安装的是 64的!

  7. <canvas>drawImage()方法无法显示图片

    在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...

  8. 每天一个linux命令（26）：用SecureCRT来上传和下载

    用SSH管理linux服务器时经常需要远程与本地之间交互文件.而直接用SecureCRT自带的上传下载功能无疑是最方便的,SecureCRT下的文件传输协议有ASCII.Xmodem.Zmodem.文 ...

  9. Cookie与Session

    再说Cookie与Session之前,先要了解一下http协议. 何为http协议: http协议即超文本传输协议,一种基于浏览器请求与服务器响应的协议,该协议主要的特点就是它是一种无状态的协议(只针 ...

  10. OpenCASCADE Quaternion

    OpenCASCADE Quaternion eryar@163.com Abstract. The quaternions are members of a noncommutative divis ...