Question

我正在尝试制作一张匹配记忆游戏的卡片。我有10个不同的图像，代表我在一张620px宽和62px高的恶作纸上排列的卡面。

每张卡片都在页面上由DIV元素表示。

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

我已使用以下CSS设置了卡片元素的背景...

.card {
    background-image: url(/img/cards.png);
    background-repeat: no-repeat;
    background-size: 1000% 100%;
    height: 8rem;
    width: 8rem;
}

然后对于每张卡片，我将背景定位......

.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倍。然后对于.drums设置10％的背景位置会将背景移动一个div的宽度。

问题是背景似乎没有放在正确的位置！

修改

JSFiddle按要求http://jsfiddle.net/LPfcp/

Answer 1

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

[||||              ] 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%。

Answer 2

显然背景没有正确编辑以调整为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; }

在CSS中定位％大小的精灵表背景

2 个答案: