CSS Sprite(雪碧图)是将多个小图片合并为一张大图片,通过CSS背景定位显示,以减少页面的HTTP请求次数,提升网页性能。在制作CSS Sprite时,图片的排列方式非常重要,一般有以下几种排列方式:
1、水平排列 ┌───┬───┬───┬───┐ │ 1 │ 2 │ 3 │ 4 │ └───┴───┴───┴───┘ 2、垂直排列 ┌───┐ │ 1 │ ├───┤ │ 2 │ ├───┤ │ 3 │ ├───┤ │ 4 │ └───┘ 3、九宫格排列 ┌───┬───┬───┐ │ 1 │ 2 │ 3 │ ├───┼───┼───┤ │ 4 │ 5 │ 6 │ ├───┼───┼───┤ │ 7 │ 8 │ 9 │ └───┴───┴───┘ 4、树形排列 ┌───┬───┬───┐ │ 1 │ 2 │ 3 │ ├───┼─┬─┬─┼─┤ │ 4 │ 5 6 7 │ ├───┼─┴─┴─┼─┤ │ 8 │ 9 10 11│ └───┴───┴───┘
以上几种排列方式各有优缺点,视具体情况而定。一般建议在制作CSS Sprite时,统一图标大小、留白、对齐方式,以便在后期维护时更加便捷。