多个图标图片（雪碧图）使用CSS样式显示
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。
如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是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样式显示的更多相关文章
- css雪碧图（css splite）
将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0
- Css雪碧图
Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...
- css雪碧图制作
使用css背景合并工具cssSprite 工具下载链接: http://download.csdn.net/download/wx247919365/8741243 1.选择文件 2.生成雪碧图 3. ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- css雪碧图（精灵图）与字体图标的介绍以及对比
css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...
- css 雪碧图 及jquery定位代码
无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...
- 前端-如何用gulp快速搭建项目（sass预编译，代码压缩，css前缀，浏览器自动刷新，雪碧图合成）
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- vue-cli3使用webpack-spritesmith配置雪碧图
一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webp ...
- webpack使用雪碧图插件
1.先安装插件 npm install --save-dev webpack-spritesmith 2.配置webpack 配置之前 先引入var SpritesmithPlugin = requi ...
- css之background-position属性实现雪碧图
什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分 ...
随机推荐
- hadoop自动安装脚本
还不能实现完全自动安装,只能算半自动的. 进行交互主要障碍有两点: 1. ssh-keygen的时候需要点击回车. 2. passwd 需要设置密码 如果谁能解决以上两点,欢迎email给我. 另外 ...
- R语言对矩阵按某一列排序
[plain] view plaincopy a <- c(5,4,3,2,1) b <- c(1,2,3,4,5) c <- cbind(a,b) [plain] view pla ...
- SQL语言 持续更新中……
SQL提供了很多的聚集函数 COUNT([DISTINCT\ALL]*) SUM([DISTINCT\ALL]<列名>)AVG().…… WHERE 子句中是不能用聚集函数作为条件表达式 ...
- 令牌Token和会话Session原理与攻略
本篇文章将从无到完整的登录框架或API详细讲述登录令牌原理.攻略等安全点. 有些协议或框架也喜欢把令牌叫票据(Ticket),不论是APP还是Web浏览器,很多框架或协议都用到了本文所说的这套类似的认 ...
- C++基础之数据类型和表达式
面向对象特征1)封装 (类)2)继承(基类和派生类)3)多态(通过定义虚函数支持动态联编) 面向对象三要素(类-创建对象的样板,对象,继承) C++基本数据类型整型 int (32位机,字宽4字节, ...
- 学习笔记：首次进行JUnit+Ant构建自动的单元测试（一）
指导博客:https://blog.csdn.net/Cceking/article/details/51692010 基于软件测试的需求,使用JUnit+Ant构建自动的单元测试. IDE:ecli ...
- Go:一个可能导致锁失效的坑
先看代码: package main import( "sync" ) var hclock sync.RWMutex func main() { a := make(map[in ...
- PAT L2-014【二分】
思路: 最后发现对当前列车比我大的编号的栈有没有就好了,所以开个vector存一下,然后二分一下vector找一下第一个比我大的数就好了 #include <bits/stdc++.h> ...
- MySQL的CURRENT_DATE()，NOW()，DATE_FORMAT()函数的应用，类型转换及操作汇总
内容简介 datetime类型和timestamp类型的取值范围,CURRENT_DATE()函数应用,NOW()函数应用,DATE_FROMAT()函数取星期,日期.字符串.时间戳相互转换等. 时间 ...
- 2017-10-13 NOIP模拟赛
入阵曲 #include<iostream> #include<cstdio> #define maxn 401 #ifdef WIN32 #define PLL " ...