css - CSS 精灵位置

Question

我有一个链接，我想用它加上，它会在悬停时改变颜色。

但在过去的一个小时里，我无法弄清楚如何用恶意来做这个把戏。

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

<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 sprite 通常是垂直排列的，因为这将使您能够在 sprite 文件中仅显示特定的行。为了在水平排列的图像上使用 sprite 技术，您必须创建第二个具有非透明背景的元素：

<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)。