css - 背景大小为 'changing image link/on hover' + 文本定位的问题

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/

Sprite 就是这么棘手。如果这还不够好，还有其他各种方法。