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

如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是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. css雪碧图（css splite）

    将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0

  2. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

  3. css雪碧图制作

    使用css背景合并工具cssSprite 工具下载链接: http://download.csdn.net/download/wx247919365/8741243 1.选择文件 2.生成雪碧图 3. ...

  4. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  5. css雪碧图（精灵图）与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

  6. css 雪碧图 及jquery定位代码

    无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...

  7. 前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  8. vue-cli3使用webpack-spritesmith配置雪碧图

    一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webp ...

  9. webpack使用雪碧图插件

    1.先安装插件 npm install --save-dev webpack-spritesmith 2.配置webpack 配置之前 先引入var SpritesmithPlugin = requi ...

  10. css之background-position属性实现雪碧图

    什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分 ...

随机推荐

  1. Flask03 路由控制（转换器）、反转、请求方法控制

    1 提出问题 如何实现前端传过去的路径时动态的(即:多个url对应一个url视图函数) 例如: 浏览器中输入 http://127.0.0.1:5000/test/good/ 或者 http://12 ...

  2. Jmeter JDBC Request的sql语句不支持；号

    Jmeter JDBC Request的sql语句不支持:号,如果要批量插入数据,则需要使用以下方式 INSERT INTO bank_info( `id`, `bank_code`, `bank_n ...

  3. Python脚本打包为exe文件

    本文转载自http://www.open-open.com/lib/view/open1342675735745.html   把用Python写好的脚本,可以用pyinstaller打包成.exe文 ...

  4. Entity Framework Code-First（4）：Simple Code First Example

    Simple Code First Example: Let's assume that we want to create a simple application for XYZ School. ...

  5. hdu1074

    #include <iostream> #include <string> #include <cstring> #include <stack> #i ...

  6. js或jQuery中 邮箱跳转的问题，跳转到指定邮箱（通过layui的ifram实现）

    对刚做的东西记个笔记 如果遇到同样问题解决起来又问题的欢迎留言 var emailtext = $("#TextBoxEmail").val();//获得要截取的值 var arr ...

  7. ExecuteNonQuery(),ExecuteScalar(),ExecuteReader的用法-转

    using System.Data.SqlClient;...SqlConnection conn = new SqlConnection(@"server=ws7\leosql;datab ...

  8. Ubuntu 与 Windows 共享文件夹

    1. Ubuntu关机后 编辑虚拟机设置->option->共享文件夹->添加->确定 完成! 2.共享文件夹后在/mnt/hgfs/文件夹下无法看到共享的文件夹: 解决方法: ...

  9. Codeforces - 102222H - Fight Against Monsters - 贪心

    https://codeforc.es/gym/102222/problem/H 题意:有一堆怪兽,怪兽有HP和ATK.你有一个英雄,英雄每次先被所有怪兽打,然后打其中一个怪兽.打的伤害递增,第一次1 ...

  10. 前端编码规范 -- css篇

    合理的避免使用ID 一般情况下ID不应该被应用于样式. ID的样式不能被复用并且每个页面中你只能使用一次ID. 使用ID唯一有效的是确定网页或整个站点中的位置. 尽管如此,你应该始终考虑使用class ...