您现在的位置:首页 >> 前端 >> 内容

多个图标在一个图中,实现定位

时间:2016/11/28 9:25:00 点击:

  核心提示:现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态。如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务器...

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

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

然后有些网站都会用一张大图,把网页中的小图标小图片都合在一起。

多个图标在一个图中,实现定位

那么,如何在网页中单独使用其中的一图案呢?

#box{ width:50px;height:50px;
     background-image:url(img/car.png);
     background-position: -0x -0px; 
     }

设置一个绝对定位,在调试器里调试到正确的位置就可以了,修改px值就可以了。

今天写案例的时候,居然忘记了该如何设置这个图片定位的css了,然后在网上又搜了小会,才想起来。

小知识,温故而知新。

作者:网络 来源:unaMattin