CSS精灵位置

我有一个链接，我想用它加上，这将改变悬停时的颜色

但是在过去的一个小时里，我想不出如何用唾沫做这个把戏

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

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

---

另外，加上img，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;
}

.a座{
背景：url（“images/plus.png”）不重复0%40%；
背景位置：10px，0px；
字体大小：12px；
显示：内联块；
左侧填充：16px；/*一个图标的实际宽度*/
}
.block a.plus:悬停{
/*举个例子*/
背景位置：0-16px；
}   
.a座+跨度{
背景色：#fff；
}

---

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

您可以使用：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;
}
​

a、 加上{
位置：相对位置；
左侧填充：25px；
}
a、 加：以前{
位置：绝对位置；
左：0；
内容：“；
宽度：15px；
高度：15px；
背景：红色url（“images/plus.png”）10px 0无重复；
}
​

---

红色仅用于测试，您可以不使用该颜色

-10px 0

是图像在精灵中的位置（

x y

）。

您想要什么？如果用户单击加号，则更改文本颜色？是的，正如您所看到的，在第一个屏幕中显示2个加号，我只需要灰色，悬停时显示红色。@hawaii.five-0将来请完整阅读问题-CSS精灵位置。不同的图像有什么不同吗？@NoNameZ:您是否尝试将

display:inline block

添加到

a.plus

？没有，如果我这样做了-所有设计都出错了。我只使用了背景：url（“images/plus.png”）不重复0%50%；左侧：5px；（跨越）。我的一般问题是在左边填充：16px；/*一个图标的实际宽度*/如您所评论的。。。我总算错过了。

<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;
}
​