精灵仅部分显示

时间:2012-11-05 07:55:34

标签: css performance stylesheet sprite css-sprites

我试图为我的asp.net主页底部制作精灵图像,以减少http请求的数量。我看了所有的编码,找不到任何错误。这是图像:

5 social media buttons

但由于某种原因,我的谷歌+图片没有出现;它只显示5个社交媒体按钮中的4个。这是jsfiddle,它也没有显示谷歌+按钮:

JSFiddle - social media buttons

感谢任何可以提供这方面指导的人!

SE希望我在这里包含代码,尽管它是在小提琴上。但无论如何,这是我在样式表中的内容:

.homepage{
width:23px;
height:23px;
background-image: url(http://www.ussvision.com/images/sprite-homepage.jpg); 
background-repeat:no-repeat;
}
.fbook{
background-position: 0px 0px;
}
.twit{
background-position: -25px 0px;
}
.yt{
background-position: -50px 0px;
}
.goog{
background-position: -103px 0px;
}
.linked{
background-position: -150px 0px;
}

1 个答案:

答案 0 :(得分:6)

.goog的位置应为-75px 0px:请参阅http://jsfiddle.net/R8Eu8/1/

编辑:和.linked应为-103px, 0px