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

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

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

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

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

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

做一个简单的页面，放两个div，需要在这两个div上分别显示文件夹和文件图标。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style>        </style>
  6.     </head>
  7.     <body>
  8.         <div></div>
  9.         <div></div>
  10.     </body>
  11. </html>

显示方法很简单，就是将元素的大小设成图标的大小，图片作为元素的背景，设置图片的left和top让对应的图标被显露出来。

定义一个默认的样式，规定元素的大小，这里的图标是32*32，照样设置元素的大小。

  1. .tree-default {
  2.     width:32px;
  3.     height:32px;
  4. }

定义文件夹图标的显示样式，就是讲图标图片作为背景，按照图标的位置调整left和top坐标值。

  1. .tree-folder {
  2.     background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
  3. }

定义文件图标的显示样式，调整文件图标所在的位置。

  1. .tree-file {
  2.     background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
  3. }

再给元素设上样式。

  1. <div class="tree-default tree-file"></div>
  2. <div class="tree-default tree-folder"></div>

完成后的效果：

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

所有代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style>
  6.             .tree-default{
  7.                 width:32px;
  8.                 height:32px;
  9.             }
  10.  
  11.             .tree-file{
  12.                 background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
  13.             }
  14.  
  15.             .tree-folder{
  16.                 background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
  17.             }
  18.  
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div class="tree-default tree-file"></div>
  23.         <div class="tree-default tree-folder"></div>
  24.     </body>
  25. </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. JSP错误页面

    exception是JSP九大内置对象之一,其实例代表其他页面的异常和错误.只有当页面是错误处理页面时,即isErroePage为 true时,该对象才可以使用.对于C项,errorPage的实质就是 ...

  2. 25. CTF综合靶机渗透(17)

    靶机链接 https://www.vulnhub.com/entry/the-ether-evilscience,212 运行环境 本靶机提供了VMware的镜像,从Vulnhub下载之后解压,运行v ...

  3. hdu1068

    #include<stdio.h>#include<string.h>const int MAXN=1000;int map[MAXN][MAXN];int n;int lin ...

  4. hdu1052

    #include <iostream>#include<algorithm>#include<queue>#include<stack>#include ...

  5. EIP权限工作流平台总结-4跨域配置

    1.预览地址:www.eipflow.com (1) 权限工作流:www.demo.eipflow.com/Account/Login (2) 基础权限版:www.auth.eipflow.com/A ...

  6. Boost Python学习笔记（五）

    你将学到什么 在C++中调用Python代码时的返回值问题 基础类型 修改Python脚本(build/zoo.py) def rint(): return 2 def rstr(): return ...

  7. （linux）修改MySQL密码方法

    1,在/etc/my.cnf末尾  加入skip-grant-tables,保存,跳过身份验证. 2,重启MySql,使刚才修改的配置生效. 3,终端输入mysql,然后再输入use mysql; 4 ...

  8. Eclipse 整合SpringMybatis，SpringMVC，用Maven管理项目搭建详情

    环境:JDK下载地址 https://pan.baidu.com/s/1UyvEAI-4Ci6TDdVJiYUUiQ 密码:ma51 IDE:eclipse下载地址 https://pan.baidu ...

  9. Spark内核概述

    提交Spark程序的机器一般一定和Spark集群在同样的网络环境中(Driver频繁和Executors通信),且其配置和普通的Worker一致 1. Driver: 具有main方法的,初始化 Sp ...

  10. [Xcode 实际操作]四、常用控件-(9)普通警告窗口的使用

    目录:[Swift]Xcode实际操作 本文将演示警告窗口的使用方法. 警告窗口不仅可以给用户展现提示信息,还可以提供若干选项供用户选择. 在项目导航区,打开视图控制器的代码文件[ViewContro ...