雪碧图的简单制作

雪碧图是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好,并且可以减小图片的总大小。

雪碧图的制作与使用方法:
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。
原图如下:


雪碧图的简单制作_第1张图片
2.jpg

使用自动化构建工具自动拼接合并后的图片。
引用图片时,图片地址为合并后的图片地址。

需要进行截图


1.jpg
3.jpg

源代码如下:




    
    按钮练习
    


    
    


你可能感兴趣的:(雪碧图的简单制作)