CSS精灵位置

Question

我有一个链接，我想要使用加号，这会在悬停时改变颜色。

但在过去的一个小时里，我无法弄清楚如何用spites来做这个技巧。

这是一个链接，没什么特别的

<a href="detailed.html" class="plus">Find Out More!</a>

我的css代码

.block a.plus {
    background: url("images/plus.png") no-repeat 0% 40%;
    background-position: 10px , 0px;
    font-size: 12px;
    padding-left: 25px;
}

.block a.plus:hover{
    /*Just for example*/
    background-position: -15px -1px;
}

还加上img

Answer 1

CSS精灵通常是垂直排列的，因为这样可以让你只在精灵文件中显示一个特定的行。为了在水平排列图像上使用精灵技术，你必须创建一个具有非透明背景的第二个元素：

<a href="detailed.html" class="plus">
    <span>Find Out More!</span>
</a>

.block a.plus {
    background: url("images/plus.png") no-repeat 0% 40%;
    background-position: 10px , 0px;
    font-size: 12px;
    display: inline-block;
    padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
    /*Just for example*/
    background-position: 0 -16px;
}   
.block a.plus span{
    background-color: #fff;
}

如果您不想使用第二个元素，则应重新排列图标。

Answer 2

您可以使用：before选择器实现此目的。

<a href="detailed.html" class="plus">Find Out More!</a>

a.plus {
    position: relative;
    padding-left: 25px;
}

a.plus:before {
    position: absolute;
    left: 0;
    content: " ";
    width: 15px;
    height: 15px;
    background: red url("images/plus.png") 10px 0 no-repeat;
}
​

颜色red仅用于测试，您可以将其保留。 -10px 0是精灵中图像的位置（x y）。