CSS Satyr

版本：1.2.0.0
作者：shen.li
主页：http://shen.li/blog/post/C_sharp/CSS_Satyr.html
图片：C:\Users\lenovo\Desktop\新建文件夹 (4)\CSS Satyr.png

CSS 代码

.shen_li {background-image: url("CSS Satyr.png"); display: block;}
.pic_1 {background-position: -0px -0px; width: 50px; height: 50px; }
.pic_2 {background-position: -52px -0px; width: 50px; height: 50px; }
.pic_3 {background-position: -104px -0px; width: 50px; height: 50px; }
.pic_4 {background-position: -156px -0px; width: 50px; height: 50px; }
.pic_5 {background-position: -208px -0px; width: 50px; height: 50px; }
.pic_6 {background-position: -260px -0px; width: 50px; height: 50px; }
.pic_7 {background-position: -312px -0px; width: 50px; height: 50px; }
.pic_8 {background-position: -364px -0px; width: 50px; height: 50px; }
.pic_9 {background-position: -416px -0px; width: 50px; height: 50px; }
.pic_10 {background-position: -468px -0px; width: 50px; height: 50px; }
.pic_11 {background-position: -520px -0px; width: 50px; height: 50px; }
.pic_12 {background-position: -572px -0px; width: 50px; height: 50px; }
.pic_13 {background-position: -624px -0px; width: 50px; height: 50px; }
.pic_14 {background-position: -676px -0px; width: 50px; height: 50px; }
.pic_15 {background-position: -728px -0px; width: 50px; height: 50px; }
.pic_16 {background-position: -780px -0px; width: 50px; height: 50px; }
.pic_17 {background-position: -832px -0px; width: 50px; height: 50px; }
.pic_18 {background-position: -884px -0px; width: 50px; height: 50px; }
.pic_19 {background-position: -936px -0px; width: 50px; height: 50px; }
.pic_20 {background-position: -0px -52px; width: 50px; height: 50px; }
.pic_21 {background-position: -52px -52px; width: 50px; height: 50px; }
.pic_22 {background-position: -104px -52px; width: 50px; height: 50px; }
.pic_23 {background-position: -156px -52px; width: 50px; height: 50px; }
.pic_24 {background-position: -208px -52px; width: 50px; height: 50px; }
.pic_25 {background-position: -260px -52px; width: 50px; height: 50px; }
.pic_26 {background-position: -312px -52px; width: 50px; height: 50px; }
.pic_27 {background-position: -364px -52px; width: 50px; height: 50px; }
.pic_28 {background-position: -416px -52px; width: 50px; height: 50px; }
.pic_29 {background-position: -468px -52px; width: 50px; height: 50px; }
.pic_30 {background-position: -520px -52px; width: 50px; height: 50px; }
.pic_31 {background-position: -572px -52px; width: 50px; height: 50px; }
.pic_32 {background-position: -624px -52px; width: 50px; height: 50px; }
.pic_33 {background-position: -676px -52px; width: 50px; height: 50px; }
.pic_34 {background-position: -728px -52px; width: 50px; height: 50px; }
.pic_35 {background-position: -780px -52px; width: 50px; height: 50px; }

调用效果

icon1-01.png
...
icon1-01.png

icon1-02.png
...
icon1-02.png

icon1-03.png
...
icon1-03.png

icon1-04.png
...
icon1-04.png

icon1-05.png
...
icon1-05.png

icon1-06.png
...
icon1-06.png

icon1-07.png
...
icon1-07.png

icon1-08.png
...
icon1-08.png

icon1-09.png
...
icon1-09.png

icon1-10.png
...
icon1-10.png

icon1-11.png
...
icon1-11.png

icon1-12.png
...
icon1-12.png

icon1-13.png
...
icon1-13.png

icon2-01.png
...
icon2-01.png

icon2-02.png
...
icon2-02.png

icon2-03.png
...
icon2-03.png

icon2-04.png
...
icon2-04.png

icon2-05.png
...
icon2-05.png

icon2-06.png
...
icon2-06.png

icon2-07.png
...
icon2-07.png

icon2-08.png
...
icon2-08.png

icon2-09.png
...
icon2-09.png

icon2-10.png
...
icon2-10.png

icon3-01.png
...
icon3-01.png

icon3-02.png
...
icon3-02.png

icon3-03.png
...
icon3-03.png

icon3-04.png
...
icon3-04.png

icon3-05.png
...
icon3-05.png

icon3-06.png
...
icon3-06.png

icon3-07.png
...
icon3-07.png

icon3-08.png
...
icon3-08.png

icon3-09.png
...
icon3-09.png

icon4-01.png
...
icon4-01.png

icon4-02.png
...
icon4-02.png

icon4-03.png
...
icon4-03.png