Question

我要做的是将精灵作为我的链接的背景。然后当它盘旋时，它会变成另一种颜色的精灵。下面的代码完成了。

问题是精灵直接在链接文本之上/之后。有没有办法确定精灵在文本中的位置？

如果我更改background-position，它只会更改用于精灵的像素，而不是精灵的实际位置。提前谢谢！

HTML

<a class="sprite-link" href="#">Link Text</a>

CSS

a:hover {
color: black;
}

.sprite-link {
background: url(spriteurl.png) no-repeat;
background-position: 0px 0px;
width: 165px;
height: 45px;
display: block;
}

.sprite-link:hover {
background: url(spriteurl.png) no-repeat;
background-position: 0px -45px;
width: 165px;
height: 45px;
}

Answer 1

您可以使用::after伪元素来实现...

检查 Fiddle 。

我没有精灵，但想象示例中的正方形就是它。

<强> CSS

.sprite-link::after {
    content: "";
    padding: 10px;
    background: red;
    width: 165px;
    height: 45px;
    display: block;
}

.sprite-link:hover::after {
    width: 165px;
    height: 45px;
    background: black;
}

Answer 2

您可能想要做的是在标签内部使用单独的跨度，并将背景放在其上。

HTML

<a class="sprite-link">
    <span></span>
    Link Text
</a>

CSS

a:hover {
    color: black;
}

.sprite-link > span {
    background: url(spriteurl.png) no-repeat;
    background-position: 0px 0px;
    width: 165px;
    height: 45px;
    display: inline-block;
}

.sprite-link:hover > span {
    background: url(spriteurl.png) no-repeat;
    background-position: 0px -45px;
}

Answer 3

使用绝对定位的伪元素并将精灵放在伪元素中。

例如（见小提琴）：

a { position: relative; padding-right: 30px; display: inline-block;}
a:before { content:""; border: 1px solid #000; display: inline-block; position: absolute; width: 20px; height: 20px; right:0; }

http://jsfiddle.net/XJZfC/

在div中移动CSS精灵？

3 个答案: