现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态。
如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务器的并发连接数是受限的,通常是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 Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分。
浏览器通常很快就可以将文本显示出来,但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显,为了解决这个问题,可以将多个图像拼合成单个背景图像(sprite),再通过CSS控制具体显示图像的哪一部分
CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图。雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服务器发送请求
雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位。没有使用雪碧图时图标是这样一个个的单独文件:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!