Html 如何正确使用css精灵？

我正在尝试使用css精灵在图像的特定部分移动一段文字，但我正在应用的背景位置似乎不起作用。我尝试过改变背景位置，但是文本部分（如twitter、facebook）没有移动到正确的位置。

#固定社交{
背景：url（“../img/socials/icon.png”）不重复；
最高：40%；
宽度：50px；
高度：100px；
位置：固定；
左：0；
显示：块；
z指数：1000；
背景色：#eee；
文本缩进：-9999px；
}
.facebookflat{
背景位置：-200px 0；
高度：50px；
}
.facebookflat:悬停{
光标：指针；
}
.twitterflat{
高度：50px；
背景位置：-400px 0；
}
.twitterflat:悬停{
光标：指针；
}

---

它不起作用的原因是，您将背景图像指定给容器div（

#fixedsocial

），并尝试调整内部div上的位置，因为内部div没有要定位的背景。你需要重新考虑一下你的CSS，因为你必须把背景分配给你真正想要使用它的地方

这是一把小提琴：

#固定社交{
最高：40%；
宽度：50px；
高度：100px；
位置：固定；
左：0；
显示：块；
z指数：1000；
背景色：#eee；
}
.facebookflat{
背景：url（“https://i.stack.imgur.com/LR6bK.png）无重复；
背景位置：-168px-161px；
背景大小：1430%1430%；
高度：50px；
宽度：50px；
}
.facebookflat:悬停{
光标：指针；
}
.twitterflat{
背景：url（“https://i.stack.imgur.com/LR6bK.png）无重复；
背景位置：-430px-161px；
背景大小：1420%1420%；
高度：50px；
宽度：50px；
}
.twitterflat:悬停{
光标：指针；
}

实际上我不理解您的要求。我想显示第二排圆圈1上的Facebook和Twitter图标“我想显示第二排圆圈1上的Facebook和Twitter图标”这是什么意思？我上传的这张图片是我想在第二张图片上显示facebook和twitter图片圈图标的图片，并添加了一个例子。由于您的

50px*50px

框对于原始图像大小来说太小，我不得不处理

背景大小。如果你想让图标看起来好看，你可以调整原始图像的大小，或者使用稍微大一点的方框（然后丢失
背景大小
属性，可能需要将图标与
背景位置
属性重新对齐。如果是这样，如果你愿意，我想要一个有标记的答案：）