【CSS】组装图标

一般情况下，图标总是事先做成图片然后直接拿来调用就行了。但是碰到一个状况需要做3分比例饼图，采用3种颜色标识不同内容在总体所占的比例，简单起见，所占比例为1/8的倍数。效果如下：

这样把每一个比例单独做个图，未免工作量过大，没算错的话需要做45个图；当然你可能会想到用程序去生成图，但也要会图像编程才行，这里先不考虑。

我的方法是把图分解，做一张灰圆，然后分别做8个不同8分比例的浅蓝、深蓝扇形，这个做起来还是比较方便的。做好后利用雪碧工具把图拼合成一张，如下：

利用gif图片的透明性进行CSS组装，如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS组装图标</title> </head> <body> <style> .icon{ width:16px; height:16px; background:url(http://witmax.cn/img/css-original-icon.gif) no-repeat -256px 0px; display: inline-block; } .icon span, .icon span span{ width:16px; height:16px; background-repeat:no-repeat; background-image:url(http://witmax.cn/img/css-original-icon.gif); display: inline-block; } .b1 { background-position:0px 0px; } .b2 { background-position:-16px 0px; } .b3 { background-position:-32px 0px; } .b4 { background-position:-48px 0px; } .b5 { background-position:-64px 0px; } .b6 { background-position:-80px 0px; } .b7 { background-position:-96px 0px; } .b8 { background-position:-112px 0px; } .d1 { background-position:-128px 0px; } .d2 { background-position:-144px 0px; } .d3 { background-position:-160px 0px; } .d4 { background-position:-176px 0px; } .d5 { background-position:-192px 0px; } .d6 { background-position:-208px 0px; } .d7 { background-position:-224px 0px; } .d8 { background-position:-250px 0px; } </style> 3:3:2 2:2:4 4:3:1 <a href="http://witmax.cn" target="_blank">晴枫</a>制作 </body> </html>

提示：你可以先修改部分代码再运行。

源码下载：[download id="24" format="3"]

参考文章： Tencent ISD Webteam《由黄钻等级图标处理引发的思考》

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【CSS】组装图标》

标签： CSS • 图标

枫芸志

枫芸志

【CSS】组装图标

还没有人抢沙发呢~

点击这里取消回复。