Html 将一个图像转换为不同的社会链接

我发现了这样一种方法：通过使用x和y图标来定义你想要在链接中显示的图片部分，将一张图片上的不同社交图标制作成不同的社交链接

我遇到的问题是，一旦我设置了代码，背景图像就不会显示。如果有人能提供他们对这段代码为什么不能正常工作的见解，我们将不胜感激

CSS:

HTML:

在上找到我们

为了方便您，我还创建了一个JSFIDLE：

---

代码正在呈现列表，只是背景图像没有显示…

您的锚点正在塌陷为0x0，因为它们中没有内容。它们不会因为有背景图像而自动扩展到父对象的大小。明确地给他们一个像li一样的宽度/高度，你就会得到

锚的相关CSS：

display: block;
width: 24px;
height: 24px;

或者，您可以将宽度和高度设置为父级的100%，而不是显式设置。

a

元素是

内联的

，它们的

宽度

和

高度

， 由其中的数据计算。 因此，您必须显式设置它们，将此规则添加到CSS中：

.social a {
    display: inline-block;
    width: 24px;
    height: 24px;
}

---

提示 最好在常规选择器中只编写一次背景图像：

.social a {
    background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png);
}

只需更改每个元素的背景位置即可：

.social li.facebook a {
    background-position: 0 0;
}

.social li.twitter a {
    background-position: -24px 0;
}

---

您正在谈论的方法称为Spriting/Sprites。啊！我想这个方法可能有一个合适的术语！谢谢你让我知道！啊。。。我懂了。我认为最初的宽度和高度属性。社会李类将延续到链接。。。但我们吸取了教训！非常感谢你！谢谢你向我解释！这是一个有用的提示！我现在就把它修好！

.social a {
    background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png);
}

.social li.facebook a {
    background-position: 0 0;
}

.social li.twitter a {
    background-position: -24px 0;
}