制作雪碧图代码示例

Posted 安锅锅c

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了制作雪碧图代码示例相关的知识,希望对你有一定的参考价值。

制作雪碧图的辅助工具是ps,先要测出所要的图片的宽高写到代码中去,给它预留位置大小,然后测出所要点击后的图标移动位置的宽高写入代码。

                                                                                              代码示例:①、选择器名字{

                                                                                                                      width:xxPX              (这里可以是正负数,代表的是向左还是向右移动)

         height:xxPX

                                                                                      background:图片位置      xxPX   xxPX(这里指所要移动的像素)

                          }

②、 选择器:hover{                                          (这里代码意思是点击前)

background:图片位置  xxPX  xxPX

}

以上是关于制作雪碧图代码示例的主要内容,如果未能解决你的问题,请参考以下文章

雪碧图制作使用的几种方式!

雪碧图制作使用的几种方式!

网站性能优化之雪碧图制作

网页精灵——CSS sprite全方位认知和攻略

雪碧图的制作

Photoshop制作雪碧图技巧