Html 在CSS中定位%大小的精灵页面背景

我想做一个卡片匹配记忆游戏。我有10张不同的图片，代表我在一张620像素宽，62像素高的卡片上排列的卡片面

每个卡片在页面上都由一个DIV元素表示

<div class="card guitar"></div>
<div class="card drums"></div>
<div class="card piano"></div>
<div class="card trumpet"></div>
....

然后，对于每一张卡片，我都会定位背景

.card.guitar { background-position: 0 0; }
.card.drums { background-position: 10% 0; }
.card.piano { background-position: 20% 0; }
.card.trumpet { background-position: 30% 0; }
....

我的假设是，将背景图像设置为1000%将使其看起来比指定给它的div大10倍。然后，设置10%背景位置的鼓将背景移动一个div宽度

问题是背景似乎不在正确的位置

---

编辑。

---

jsiddle根据请求

背景位置

，当与百分比一起使用时，将元素的百分比与图像的百分比对齐。例如：

[||||              ] Image at 0%
[       ||||       ] Image at 50%
[              ||||] Image at 100%

这有意义吗

记住这一点，您将需要11%、22%、33%、44%、56%、67%、78%、89%和100%。请注意，它不会完全准确，因为100%不能很好地除以9

考虑将项目按更好的分割顺序排列，如：

1 2 3 4 5
6 7 8 9 0

---

然后您可以在最上面一行设置

0%0%

，

25%0%

，

50%0%

，

75%0%

和

100%0%

，以及

0%100%

，

25%100%

，

50%100%

，

75%100%

和

100%100%

用于最下面一行。

显然，背景未正确设置，无法调整为1000% 所以你必须这样做：

.card.guitar { background-position: 0 0; }
.card.drums { background-position: 10% 0; }
.card.piano { background-position: 22.2% 0; }
.card.trumpet { background-position: 33.3% 0; }

---

你能给我们一个JSFIDLE演示吗？旁注：我希望你的玩家不会使用网站管理员工具，否则他们会很容易用类来识别卡片……你是说

sprite

而不是

intervent

？

背景位置与元素的宽度相关，与背景大小无关，所以在这种情况下，你必须使用
100%
（而不是
10%
）。@webtiki没关系，这只是单人游戏，所以人们只会欺骗自己
.card.guitar { background-position: 0 0; }
.card.drums { background-position: 10% 0; }
.card.piano { background-position: 22.2% 0; }
.card.trumpet { background-position: 33.3% 0; }