今天小编跟大家讲解下有关CSS 像素图制作攻略 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 像素图制作攻略 的相关资料，希望小伙伴们看了有所帮助。
以图片中的色青蛙为例子。16X16的像素图 所以使用了如下的命名方法： r N c N - NN = r[0-15]c[0-15] (r = rol, c-col, N为自然数:0-15 ) 1.命名的规则抄袭了XXX栅格化的那篇文章。 r0c1 即表示：0 横列 1 纵列 也是top跟left的值 NN表示：W H （宽和高）(觉得最好是使用连字符这样对于10以上的数字 可以直接看出来宽和高的数值 我的这个就不优化了 ：P) 2.使用相对定位给个基点 然后使用绝对定位的top和left来控制数值 直接对应rNcN 方便快捷的对应起来。比如：复制代码代码如下:.r0c8-21{ top:0; left:8px; width:2px; height:1px; background:#000; } .r2c0-14{ top:2px; left:0px; width:1px; height:4px; background:#000; } 3.使用PS的信息结合坐标方便查找r和c的值。各位有兴趣 可以做其他的CSS像素青蛙。效果： <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>像素图色青蛙</title> <style type="text/css"> body{ background:#fff; } .pixe{ position:relative; width:16px; height:16px; } .pixe em{ position:absolute; font-size:1px; line-height:1px; } .r0c2-21{ top:0; left:2px; width:2px; height:1px; background:#000; } .r0c5-21{ top:0; left:5px; width:2px; height:1px; background:#000; } .r0c8-21{ top:0; left:8px; width:2px; height:1px; background:#000; } .r0c11-21{ top:0; left:11px; width:2px; height:1px; background:#000; } .r1c1-11{ top:1px; left:1px; height:1px; width:1px; background:#000; } .r1c3-21{ top:1px; left:3px; width:2px; height:1px; background:#000; } .r1c5-11{ top:1px; left:5px; width:1px; height:1px; background:#f00; } .r1c6-11{ top:1px; left:6px; width:1px; height:1px; background:#000; } .r1c8-11{ top:1px; left:8px; width:1px; height:1px; background:#000; } .r1c10-21{ top:1px; left:10px; width:2px; height:1px; background:#000; } .r1c12-11{ top:1px; left:12px; width:1px; height:1px; background:#f00; } .r1c13-11{ top:1px; left:13px; width:1px; height:1px; background:#000; } .r2c0-14{ top:2px; left:0px; width:1px; height:4px; background:#000; } .r2c2-54{ top:2px; left:2px; width:5px; height:4px; background:#f00; } .r2c7-14{ top:2px; left:7px; width:1px; height:4px; background:#000; } .r2c9-54{ top:2px; left:9px; width:5px; height:4px; background:#f00; } .r2c14-14{ top:2px; left:14px; width:1px; height:4px; background:#000; } .r3c1-12{ top:3px; left:1px; width:1px; height:2px; background:#ff8080; } .r3c8-12{ top:3px; left:8px; width:1px; height:2px; background:#ff8080; } .r3c15-14{ top:3px; left:15px; width:1px; height:4px; background:#b4b4b4; } .r5c1-11{ top:5px; left:1px; width:1px; height:1px; background:#e4b4b4; } .r6c1-21{ top:6px; left:1px; width:2px; height:1px; background:#000; } .r6c3-21{ top:6px; left:3px; width:2px; height:1px; background:#f00; } .r6c5-21{ top:6px; left:5px; width:2px; height:1px; background:#000; } .r6c7-11{ top:6px; left:7px; width:1px; height:1px; background:#ff0; } .r6c8-21{ top:6px; left:8px; width:2px; height:1px; background:#000; } .r6c10-21{ top:6px; left:10px; width:2px; height:1px; background:#f00; } .r6c12-21{ top:6px; left:12px; width:2px; height:1px; background:#000; } .r6c14-11{ top:6px; left:14px; width:1px; height:1px; background:#b4b4b4; } .r7c0-16{ top:7px; left:0px; width:1px; height:6px; background:#000; } .r7c1-16{ top:7px; left:1px; width:1px; height:6px; background:#d0b000; } .r7c2-16{ top:7px; left:2px; width:1px; height:6px; background:#ffd700; } .r7c3-21{ top:7px; left:3px; width:2px; height:1px; background:#000; } .r7c5-51{ top:7px; left:5px; width:5px; height:1px; background:#ff0; } .r7c10-21{ top:7px; left:10px; width:2px; height:1px; background:#000; } .r7c12-15{ top:7px; left:12px; width:1px; height:5px; background:#ffffaf; } .r7c13-16{ top:7px; left:13px; width:1px; height:6px; background:#fff; } .r7c14-16{ top:7px; left:14px; width:1px; height:6px; background:#000; } .r8c3-94{ top:8px; left:3px; width:9px; height:4px; background:#ff0; } .r8c15-16{ top:8px; left:15px; width:1px; height:6px; background:#b4b4b4; } .r9c6-12{ top:9px; left:6px; width:1px; height:2px; background:#f00; } .r9c8-12{ top:9px; left:8px; width:1px; height:2px; background:#f00; } .r10c7-12{ top:10px; left:7px; width:1px; height:2px; background:#f00; } .r12c3-121{ top:12px; left:3px; width:11px; height:1px; background:#ffd700; } .r13c1-11{ top:13px; left:1px; width:1px; height:1px; background:#000; } .r13c2-111{ top:13px; left:2px; width:11px; height:1px; background:#d0b000; } .r13c13-11{ top:13px; left:13px; width:1px; height:1px; background:#000; } .r13c14-21{ top:13px; left:14px; width:2px; height:1px; background:#b4b4b4; } .r14c2-111{ top:14px; left:2px; width:11px; height:1px; background:#000; } .r14c13-21{ top:14px; left:13px; width:2px; height:1px; background:#b4b4b4; } .r15c3-111{ top:15px; left:3px; width:11px; height:1px; background:#b4b4b4; } </style> </head> <body> <div class="pixe"> <em class="r0c2-21"> </em> <em class="r0c5-21"> </em> <em class="r0c8-21"> </em> <em class="r0c11-21"> </em> <em class="r1c1-11"> </em> <em class="r1c3-21"> </em> <em class="r1c5-11"> </em> <em class="r1c6-11"> </em> <em class="r1c8-11"> </em> <em class="r1c10-21"> </em> <em class="r1c12-11"> </em> <em class="r1c13-11"> </em> <em class="r2c0-14"> </em> <em class="r2c2-54"> </em> <em class="r2c7-14"> </em> <em class="r2c9-54"> </em> <em class="r2c14-14"> </em> <em class="r3c1-12"> </em> <em class="r3c8-12"> </em> <em class="r3c15-14"> </em> <em class="r5c1-11"> </em> <em class="r6c1-21"> </em> <em class="r6c3-21"> </em> <em class="r6c5-21"> </em> <em class="r6c7-11"> </em> <em class="r6c8-21"> </em> <em class="r6c10-21"> </em> <em class="r6c12-21"> </em> <em class="r6c14-11"> </em> <em class="r7c0-16"> </em> <em class="r7c1-16"> </em> <em class="r7c2-16"> </em> <em class="r7c3-21"> </em> <em class="r7c5-51"> </em> <em class="r7c10-21"> </em> <em class="r7c12-15"> </em> <em class="r7c13-16"> </em> <em class="r7c14-16"> </em> <em class="r8c3-94"> </em> <em class="r8c15-16"> </em> <em class="r9c6-12"> </em> <em class="r9c8-12"> </em> <em class="r10c7-12"> </em> <em class="r12c3-121"> </em> <em class="r13c1-11"> </em> <em class="r13c2-111"> </em> <em class="r13c13-11"> </em> <em class="r13c14-21"> </em> <em class="r14c13-21"> </em> <em class="r14c2-111"> </em> <em class="r15c3-111"> </em> </div> </body> </html> 提示：您可以先修改部分代码再运行来源：爱蒂网
