“更改图像链接/悬停”+文本定位的背景大小问题

Question

我似乎在设置图像链接的正确高度和宽度方面遇到了麻烦，而且我无法在不移动整个背景的情况下将文本向下移动。

I created a jsFiddle to show what I mean

我希望左侧的最后一个链接看起来像右侧的“链接”，但尚未设置。

这是我的代码：

<p class="x"><a href="#">All Events</a></p>

---

.x a {
    color: #FFFFFF;
    text-decoration: none;
    text-indent:50px;
    font-weight: bold;
    background-image: url('http://i.imgur.com/TGhDs.png');
    background-position: center 0px;
    background-repeat: no-repeat;
}

.x a:hover {
    color: #8dcdff;
    text-decoration: none;
    padding-left: 0px;
    font-weight: bold;
    background-image: url('http://i.imgur.com/TGhDs.png');
    background-position: center -21px;
    background-repeat: no-repeat;
}

有趣的是，在我的电脑上，相同的代码和所有内容都是这样的：

这是为什么？谢谢:)）

Answer 1

这是一种做法。 http://jsfiddle.net/jalbertbowdenii/pmh9f/

精灵就像那样狡猾。如果这还不够好，还有其他各种方法。