CSS中精灵图标的位置[关闭]答案

【问题标题】：Position of sprite icons in CSS [closed]CSS中精灵图标的位置[关闭]
【发布时间】：2023-03-31 19:22:01
【问题描述】：

这是我的精灵图像，图标尺寸为 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>

这里没有添加透明图片，可以忽略那部分。

【问题讨论】：

标签： html css sprite css-sprites

【解决方案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>

【讨论】：

【解决方案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>

这是多用途的最佳方式。

【讨论】：