如何用jQuery裁剪精灵图（不使用Canvas）：国际象棋骑士图标提取

问题解决步骤 #

1. 修复背景图设置的语法错误

你当前代码里的ChessSprites.png既没加字符串引号，也不符合CSSbackground-image的url()语法，这是jQuery无法设置背景图的核心原因。同时，精灵图显示单个棋子必须通过background-position定位到对应区域，否则只会显示图的左上角部分。

2. 修正后的完整代码

// 创建骑士div元素
$('.pieces > .white').append('<div class="white wKnight wK' + wK + '" style="width: 130px; height: 130px;"></div>');
// 设置背景图与定位（白色骑士在精灵图第一行第5位，x轴偏移量为 -130*4 = -520px）
$('.wK' + wK).css({
    'background-image': 'url("ChessSprites.png")', // 确保路径与你的精灵图文件一致
    'background-position': '-520px 0',
    'background-repeat': 'no-repeat'
});
// 自增计数变量
wK++;

3. 精灵图定位规则参考

你使用的精灵图棋子排列规律：

• 第一行（y轴偏移0）：白王(0,0)、白后(-130px,0)、白车(-260px,0)、白象(-390px,0)、白马(-520px,0)、白兵(-650px,0)
• 第二行（y轴偏移-130px）：黑王(0,-130px)、黑后(-130px,-130px)、黑车(-260px,-130px)、黑象(-390px,-130px)、黑马(-520px,-130px)、黑兵(-650px,-130px)

4. 简化优化方案（推荐）

把样式写到CSS类中，减少JS代码冗余：

.wKnight {
    width: 130px;
    height: 130px;
    background-image: url("ChessSprites.png");
    background-repeat: no-repeat;
    background-position: -520px 0;
}

对应的jQuery代码可简化为：

$('.pieces > .white').append('<div class="white wKnight wK' + wK + '"></div>');
wK++;

内容的提问来源于stack exchange，提问作者Newbie_Coder