网页中多个图标在一张图片上，使用css将各图标显示

时间：2022-09-02 22:52:36

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

如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者超时的情况就会发生。

当然了，像采用CDN，或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的，但不是都有这样的条件。

一般都会把图标文件做的尽可能小，尽管如此，1张50k的文件比起50张1k文件下载起来还是很有优势的。

那么，要如何将一个图片中的单个图标显示在页面中，因为没有切分图片的功能。

首先，假设我们的图标图片是tree view中常用的：

网页中多个图标在一张图片上，使用css将各图标显示

做一个简单的页面，放两个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>

完成后的效果：

网页中多个图标在一张图片上，使用css将各图标显示

这样的处理也不是没有条件，单张图片也要尽可能的压缩，不是所有的图标都在一张图片上，可将常用的放在一张图片上，如果过多可分成多张图片放置。

所有代码：

<!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&plus;CSS&plus;JavaScript

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

  2. 网页中嵌入可以点击&OpenCurlyDoubleQuote;运行代码”执行html&sol;css&sol;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之缓存 cachestate

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  2. 使用chrome查看网页上效果的实现方式

    使用chrome查看网页上效果的实现方式 chrome是一个极为强大的工具,很多时候,我们不知道一个效果怎么实现的,我们完全可以找到响应的网页,然后找到其html文件,和js文件,查看源码,获得其实现 ...

  3. 优秀的Markdown编辑器MarkdownPad2免费版使用全功能

    MarkdownPad,一款不错的Markdown编辑器,本人一直在用,具备所有Markdown的基本语法外支持一些特别的扩展,比如表格等. MarkdownPad分为免费版和收费版,区别是免费版不支 ...

  4. JS 职责链模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. python 正则表达式&lpar;一&rpar;

    正则表达式(regular exprssion)是一种形式化语法描述的文本匹配模式.模式被解释为一组指令,然后会执行这组指令.以一个字符串作为输入,生成一个匹配的子集或源字符串的修改版本. 表达式可以 ...

  6. B - 确定比赛名次

    B - 确定比赛名次 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit S ...

  7. &lbrack;DNS&rsqb;ACL、also-notify、视图服务器及安全设置

    1. ACL :访问控制列表放在named.conf的头部,如果acl的内容太多,可以另创建一个文件,将acl放在该文件中,再在主配置文件named.conf用include 将文件加载进来(记得放在 ...

  8. ArcGis Python脚本——遍历输出面或折线要素的折点坐标

    有示例要素类如下 经过下面代码处理 #遍历输出面或折线要素的折点坐标 #infc:输入要素类 # code source: https://www.cnblogs.com/yzhyingcool/# ...

  9. C&num;-导入Excel 内容到 DataTable中

    C#-导入Excel 内容到 DataTable中 直接传入文件路径,支持所有Excel格式. 缺点:如果数据量庞大会很占内存. public static DataTable ImportExcel ...

  10. postgreSQL 应用case when的例子

    selectname,md5(indvl_id_nbr) as indvl_id_nbr,case when char_length(indvl_id_nbr)=18 or char_length(i ...

相关文章