用图像替换锚文本

Question

我想用CSS替换锚文本和图像。这是我的代码。

HTML

<div id ="first">
<a href="#">Read More</a>
</div>

<div id ="second">
<a href="#">Read More</a>
</div>

CSS

#first #second a{
background:url(../images/layout/tab.png);
float:right;
}

这是JsFiddle链接http://jsfiddle.net/chhantyal/GDF9K/

为什么不起作用？什么是正确的方式？

Answer 1

您的选择器没有按照您的预期进行操作。您当前的选择器与此结构匹配：

<div id="first">
  <div id="second">
    <a href="#">Hello</a>
  </div>
</div>

你必须是详细的：

#first a, #second a {
  background:url(../images/layout/tab.png);
  float:right;
}

演示：http://jsfiddle.net/GDF9K/2/

但是，如果你要求正确的方式，我建议你使用一个类：

<div id="first">
  <a class="foo" href="#">Read More</a>
</div>

<div id="second">
  <a class="foo" href="#">Read More</a>
</div>

你的CSS变成了：

a.foo {
  background: url(../images/layout/tab.png);
  float: right;
}

Answer 2

检查更新的Jsfiddle

#first,#second a{
    background:url(../images/layout/tab.png);
    float:right;
}

供参考检查this

Answer 3

在css中使用text-indent:-5000px

文字从屏幕上拍摄，但背景图像应保持

Answer 4

试试这个

http://jsfiddle.net/GDF9K/4/

只需将背景网址替换为您的图片网址，并设置适当的宽度和高度。

以下是下一步的预览。

http://jsfiddle.net/GDF9K/5/

希望它有所帮助！