精灵图标在 CSS 中的位置

Question

这是我的精灵图，图标尺寸为64*64（总共64*384）。我正在尝试显示图标，但只有 one/the 第一个有效。我是这个 CSS Sprite 的新手。所以寻找 help/guide.

#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>

这是多用途的最佳方式。

精灵图标在 CSS 中的位置

Position of sprite icons in CSS

html

css

sprite

css-sprites