时间戳

首页 > 解决方案 > CSS中精灵图标的位置

html - CSS中精灵图标的位置

问题描述

精灵图像

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

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

标签： htmlcssspritecss-sprites

解决方案

您应该在 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>

推荐阅读