在CSS中拆分图像？

Question

我正在尝试编辑一些CSS（在tumblr页面上），我遇到了图标问题。这是image

最右侧的Twitter图标

上面显示为在页面上分成两半。

我使用了下面的代码来获取所有四个图标（（每个图像只是一个不同的网址），但我不确定为什么Twitter会像这样拆分。

可能是什么原因，我该如何解决？

代码：

#above-nav-links a.twitter:before {
    background-image: url(http://imgh.us/twitter_icon_blue.svg);
    content: ' ';
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 3px;
    repeat: no-repeat;
}

如果您复制粘贴背景图像网址，则可以看到我用于图标的图像（不会拆分）。我用于其他图标的页面是相似的（在间距，大小等方面）。

Answer 1

由于我没有看到您的代码，您可以相应地更改代码

<ul id="#icons">
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
</ul>

<style type="text/css">
#icons > li
{
    display: inline-block;
    list-style:none;
    float:left;
}
#icons > li > a
{
    background-image: url("icons.png");
    width: 25px;
    display: inline-block;
    height: 25px;
    repeat: no-repeat;
}
#icons > li:nth-child(1) > a
{
    background-position:2px -8px;
}
#icons > li:nth-child(2) > a
{
    background-position:-29px -8px;
}
#icons > li:nth-child(3) > a
{
    background-position:-61px -8px;
}
#icons > li:nth-child(4) > a
{
    background-position:-97px -7px;
}
</style>

根据我的图标图片设置背景位置。您可能需要根据自己的形象进行修改。