jquery - 将图像拆分为 N 个 100x100 像素的图像（马赛克）

Question

我有一个未知大小的图像，我需要：

• 将其裁剪为 4:5 图像
• 将裁剪后的图像以 1:1 的比例拆分为 20 张图像，这些图像可以在 4x5 网格中拖尾以构成完整图像

我需要做在这个 jfiddle 中所做的事情：

http://jsfiddle.net/j76Ke/

但是我需要有一个“背景图像”，其中图像的一部分设置为每个单元格的专有，所以我可以隐藏一个单元格来显示背景

我认为是这样的：

.cell { background-image: url(data:mypartofimage); }

我不能像在我的小提琴中那样设置我的背景，因为我需要隐藏一个单元格并显示背景，这将是一个动态内容。

有什么建议吗？（我不能使用 PHP 或服务器端脚本）

编辑：我的小提琴现在是这样的：http:
//jsfiddle.net/LAWnx/

Answer 1

而不是对每个单元格应用不同的背景图像，你可以用一些 JS 来做......你可以在单元格上使用背景颜色。

.grid .cell  {
    background-color:#ccc;
}

.grid .cell:hover {
    background-color:transparent;
}

演示

如果您真的想为每个单元格应用背景，则必须使用一些 JS 来计算偏移量并使用background-position. 它将是相同的图像，但它的不同部分将显示在每个框中。