用圖像替換列表中的文本

所以我試圖用圖像替換列表中的文本（鏈接）。這似乎並不工作用圖像替換列表中的文本

我的代碼：

HTML：

<div id = "headeranna"> 
    <ul> 
     <li><a href="#" id="annaklein">Vraag het aan Anna</a></li> 
     <li><a href="#">Vraag het aan Anna</a></li> 
    </ul> 
</div>

CSS：

#headeranna { 
    position: absolute; 
    margin-left:410px; 
    margin-right: 10px; 
    margin-top: -90px; 
    float:right; 
} 

#annaklein{ 
    display:block; 
    width: 26px; 
    height: 26px; 
    background: url(small_anna.gif); 
    text-indent: -9999px 
}

這並不做任何事情，我失去的東西嗎？

來源

2013-05-12 jvh

你需要使用javascript。 – egig 2013-05-12 13:57:58

我不允許使用JavaScript，任何其他方式解決此問題？ – jvh 2013-05-12 13:59:32

使用某種動態腳本語言。 – Dan 2013-05-12 14:01:03

可以有不同類型的問題：

錯網址的圖像
過大的圖像，它的左上角是透明的或相同的背景
等...

我建議你使用這個背景鏈接：

background: transparent url(small_anna.gif) top left no-repeat;

，或者至少嘗試：

background: red; /* you can start with checking if you can see the background */

也許你應該把你的代碼JsFiddle，這樣我們就能看到你的問題。

來源

2013-05-12 14:02:59 seniorpreacher

感謝您的迴應，但這並沒有解決它。我已經從列表中刪除了文本，並且是這樣做的 – jvh 2013-05-12 14:10:25

它是用引號

background: url("small_anna.gif");

順便說一個很好的做法...

絕對定位的元素將始終計算浮到值「無」。所以在#headeranna 的聲明float：right;是沒有必要的。

要小心，你的圖像的路徑是確定在有關的文件

你可以看到這樣的背景下在這裏工作fiddle （我修改一些邊距值只是爲了舉例目標）

來源

2013-05-12 14:08:15 Fico

我想你是對的，但這不是問題，因爲它對不在列表中的圖像起作用。 – jvh 2013-05-12 14:09:30

指定背景網址時，並不總是需要引號。除非您需要在url中轉義引號字符，否則它可以工作。 – 2013-05-12 14:11:12

@MatRichardson，你是對的。謝謝 – Fico 2013-05-12 14:30:10

試試這個在你的CSS中

#annaklein{ 
list-style-type: none; 
list-style-image:url("small_anna.gif"); 
width: 26px; 
height: 26px; 
text-indent: -9999px;}

來源

2013-05-12 14:46:47 matzone

用圖像替換列表中的文本

回答

相關問題