CSS 像素图制做功略

日期:2020-10-27 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

以照片中的色田鸡为事例。


16X16的像素图,因此应用了以下的取名方式:
r N c N - NN = r[0⑴5]c[0⑴5]
(r = rol, c-col, N为当然数:0⑴5 )

1.取名的标准抄袭了XXX栅格数据化的那篇文章内容。
r0c1 即表明:0 横列 1 纵列,也是top跟left的值
NN表明:W H (宽和高)

(感觉最好是是应用连标识符这样针对10以上的数据,能够立即看出来宽和高的标值,我的这个就不提升了 :P)

2.应用相对性精准定位给个基点,随后应用肯定精准定位的top和left来操纵标值,立即对应rNcN,便捷便捷的对应起来。例如:

拷贝编码
编码以下:

.r0c8⑵1{
top:0; /* 对应row的第0行 */
left:8px; /* 对应col的第8列 */
width:2px; /* 对应width的2px */
height:1px;/* 对应height的1px */
background:#000;
}
.r2c0⑴4{
top:2px;
left:0px;
width:1px;
height:4px;
background:#000;
}

3.应用PS的信息内容融合座标便捷搜索r和c的值。

各位有兴趣爱好,能够做别的的CSS像素田鸡。

实际效果:

提醒:您能够先改动一部分编码再运作
上一篇:IE img过剩5像素空白处理方式 返回下一篇:没有了