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

如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是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. ASP.NET Core 数据保护（Data Protection 集群场景）【下】

    前言 接[中篇],在有一些场景下,我们需要对 ASP.NET Core 的加密方法进行扩展,来适应我们的需求,这个时候就需要使用到了一些 Core 提供的高级的功能. 本文还列举了在集群场景下,有时候 ...

  2. 【整理】待毕业.Net码农就业求职储备

    声明:本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用.当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些针对性的准备也是不错的.此外,除了技术 ...

  3. MySQL 半同步复制+MMM架构

    200 ? "200px" : this.width)!important;} --> 介绍 上篇文章介绍了MMM架构的实现方法,但是上篇文章的MMM方案的复制是异步复制,异 ...

  4. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  5. 《Entity Framework 6 Recipes》翻译系列(2) -----第一章 开始使用实体框架之使用介绍

    Visual Studio 我们在Windows平台上开发应用程序使用的工具主要是Visual Studio.这个集成开发环境已经演化了很多年,从一个简单的C++编辑器和编译器到一个高度集成.支持软件 ...

  6. 搭建LNAMP环境（三）- 源码安装Apache2.4

    上一篇:搭建LNAMP环境(二)- 源码安装Nginx1.10 1.yum安装编译apache需要的包(如果已经安装,可跳过此步骤) yum -y install pcre pcre-devel zl ...

  7. 在Thinkphp3.2.3框架下实现自动获取客户端IP地址的get_client_ip()函数

    在Thinkphp框架下使用get_client_ip()函数获取客户端IP地址十分方便: 一行代码便可以实现:$ip = get_client_ip(); 但当我们测试时会遇到后台获取的IP地址显示 ...

  8. jQuery 2.0.3 源码分析 样式操作

    根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...

  9. Android之Socket通信、List加载更多、Spinner下拉列表

    Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户端向服务器发送请求后,服务 ...

  10. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...