css - 在 CSS 中分割图像？

Question

我正在尝试编辑一些 CSS(在 tumblr 页面上)，但我遇到了图标问题。这是此 image 最右侧的 Twitter 图标

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

我为所有四个图标使用了下面的代码((每个图像只是一个不同的 url)，但我不确定为什么 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;
}

如果您复制粘贴背景图像 url，您可以看到我用于图标的图像(它没有拆分)。我用于其他图标的页面相似(在间距、大小等方面)。

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>

背景位置是根据我的图标图像设置的。您可能需要根据您的图片进行更新。