Question

我有一张26x104像素（垂直方向），包含4个标识，每个标记为26x26像素。

我想使用这4个徽标作为4个超链接的背景。所以我有这个：

HTML（这是我想要的序列）

<div class="rightfloat">
    <a class="facebook"></a>
    <a class="linkedin"></a>
    <a class="twitter"></a>
    <a class="mail"></a>
</div>

CSS：

.facebook, .linkedin, .twitter, .mail {
    display: block;
    width: 26px;
    height: 26px;
    background-image: url('style/socialmedia.png');
    background-repeat: no-repeat;
}
.facebook {
    background-position: 0px 0px;
}
.linkedin {
    background-position: 0px -26px;
}
.twitter {
    background-position: 0px -52px;
}
.mail {
    background-position: 0px -78px;
}

出于某种原因，只有第一个出现，但是在进行其他测试的同时，也会发生最后一个图标出现在第二个链接...所以很可能我没有得到它背后的逻辑。

我找了一些示例/教程，但我找不到一个。有人可以帮我一把吗？

解决方案：我已将coördinates置于负值并且有效...

Answer 1

您必须将值设为负数：

Working demo

Answer 2

解决方案：我已将coördinates置于负值并且有效...

用css定位背景图像（多图像网格）

2 个答案: