精灵图标在CSS中的位置

Question

这是我的精灵图片，图标尺寸为64 * 64（共64 * 384）。我正在尝试显示图标，但只有一个/第一个有效。我是这个CSS Sprite的新手。因此，寻求帮助/指南。

#Accommodation {
    width: 64px;
    height: 64px;
    background: url("https://i.stack.imgur.com/u4dZe.png") 0 0;
	border: 0px none;
}

#Activities {
    width: 64px;
    height: 64px;
    background: url("https://i.stack.imgur.com/u4dZe.png") 0 -64;
	border: 0px none;
}

<label><input type="checkbox" id="included[]" name="included[]" value="Accommodation"> <img id="Accommodation" src="img/trans.png" />Accommodation </label>
<label><input type="checkbox" id="included[]" name="included[]" value="Activities"> <img id="Activities" src="img/trans.png" /> Activities </label>

此处未添加透明图像，您可以忽略该部分。

Answer 1

您应该在CSS中显式设置非零值的单位，因此-64在您的情况下应为-64px：

#Accommodation {
    width: 64px;
    height: 64px;
    background: url("https://i.stack.imgur.com/u4dZe.png") 0 0;
	border: 0px none;
}

#Activities {
    width: 64px;
    height: 64px;
    background: url("https://i.stack.imgur.com/u4dZe.png") 0 -64px;
	border: 0px none;
}

<label><input type="checkbox" id="included[]" name="included[]" value="Accommodation"> <img id="Accommodation" src="img/trans.png" />Accommodation </label>
<label><input type="checkbox" id="included[]" name="included[]" value="Activities"> <img id="Activities" src="img/trans.png" /> Activities </label>

Answer 2

您可以获得精灵图标的位置：-http://www.spritecow.com/

只是一个例子：-

.sprite{background: url("img/sprite.png"); display:inline-block; line-height:0;}
.activities{background-position:0 0; width: 64px; height: 64px;}

<div class="sprite activities"></div>

这是多种用途的最佳方法。