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

如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是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. VSCode编写C/C++项目

    VSCode编写C/C++项目 1. 下载插件C/C++.C++ Intellisense;2. 新建一个空文件夹,从VSCode打开. (或File-->Open Folder-->新建 ...

  2. xilinx planahead partial reconfiguration

    1.为什么要使用reconfiguration? reconfiguration,即逻辑可重配,指的是FPGA的逻辑只加载指定区域(功能)的逻辑,而对除此之外的逻辑不产生影响,最常用的就是PCIe/P ...

  3. HTML5与CSS3实例教程(第2版) 附源码 中文pdf扫描版

    HTML5和CSS3技术是目前整个网页的基础.<HTML5与CSS3实例教程(第2版)>共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.这一版全面讲解了最新的HTML5和 ...

  4. C++哪些函数不能是虚函数

    1. inline是编译时展开,必须有实体:(不考虑不展开的假inline)   2. static属于class自己的,也必须有实体:   3. 构造函数.复制构造函数.virtual函数基于vta ...

  5. 用Python解析XMind

    本文来自网易云社区 作者:孙圣翔 转自:http://shengxiang.me/article/35/python-parse-xmind.html XMind是画思维脑图很好的工具,正好组里有个需 ...

  6. CentOS6.5内核升级FATAL: Module scsi_wait_scan not found

    系统为CentOS6.5的虚拟机内核升级至版本4.6.0-1,重启后,报以下错误: Module scsi_wait_scan not found. 无法进入系统. 问题描述详见:Known Issu ...

  7. Solr 6.7学习笔记（02）-- 配置文件 managed-schema (schema.xml) -- 样例（6）

    managed-schema 样例: <?xml version="1.0" encoding="UTF-8" ?> <!-- License ...

  8. c# Relative Path convert to Absolute Path

    Reference: http://stackoverflow.com/questions/4796254/relative-path-to-absolute-path-in-c http://sta ...

  9. luogu4168蒲公英（区间众数）

    luogu4168蒲公英(区间众数) 给定n个数,m个区间询问,问每个询问中的众数是什么. 题面很漂亮,大家可以去看一下. 对于区间众数,由于区间的答案不能由子区间简单的找出来,所以似乎不能用树形结构 ...

  10. Java 异常处理基本规则，Java异常处理的基本规范

    看了团队中原来代码中的异常处理,心碎了一地,稍微对照阿里巴巴的异常处理规范整理了一遍,准备分享一下,Java的异常处理规范&约束. 一.运行异常的扑捉 不要捕获 Java 类库中定义的继承自  ...