用圖像替換錨文本

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

試試這個

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

只是圖像的URL，並設置適當的寬度和高度更換背景網址。

這是下一步的預覽。

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

希望它有幫助！

Answer 4

使用text-indent:-5000px在CSS

文筍關閉屏幕，但背景圖像應保持