将图像分割为N个100x100像素图像（马赛克像）

Question

我的图片尺寸不详，我需要：

• 将其裁剪成4：5图像
• 将裁剪后的图像分割成20张图像1：1，可以在4x5网格中加尾以构成完整图像

我需要做这件事：

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;
}

Demo

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