收藏:CSS 图片拼合生成器

CSS 图片拼合 (CSS sprites) 可有效降低图片文件的 HTTP 连接请求数. 多个图片将以一定间距合并为一个大图片文件. 页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置.

这一技术可有效提升网站性能, 尤其是网页上有众多小图片时, 如许多菜单栏图标. Yahoo! 首页是使用此技术的一个实例.

优势

创建 CSS sprites 时, 必须考虑多重浏览器兼容性问题, 此工具可以帮您避免这些问题.

Opera

Opera (9.0版本之前) 无法显示偏移大于 2042px 或小于 -2042px 的背景图. 此工具会自动拼合图片为多列以适应垂直高度超过此限制的情况.

Safari

Safari 在显示重复背景是有一个bug. 幸运的是可设置一个较大的水平偏移值以解决此bug (可更改).

 

访问: http://spritegen.website-performance.org/