css sprite/css精灵/雪碧图css样式生成工具

用户只需点击按钮上传雪碧图片即可通过鼠标点击拖动来选择雪碧图上的小图案,待系统自动确定图形边界即可框选出相应的小图案,并在下方的代码区显示出对应的图案位置css样式。该工具还提供背景图比例设置、相对位置百分比设置等功能。提供给需要的朋友使用。

关于在线CSS雪碧图css样式工具

  1. 该工具来自国外网站www.spritecow.com,用户使用时可点击示例图片,按照图片背景的英文提示点击拖选雪碧图示例图片上的小图标,即可自动选中该图标。同时下方给出相应的css代码。用户熟悉使用方法后可自行上传雪碧图进行拖选操作。(必须是背景透明的png格式图片)
  2. 工具美中不足的是针对图形边界进行判断,进而自动选中独立的小图标。因此当雪碧图上的各个小图标间距过于紧凑的时候往往无法进行准确的自动框选判定。
  3. github地址:https://github.com/jakearchibald/sprite-cow