求一张华为图标原图图

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

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

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

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

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

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


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

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

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

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

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

2005年创办老品牌值得信赖

相关“華为标志”21 张图片

参考资料

 

随机推荐