html - 用图像替换列表中的文本

Question

所以我试图用图像替换列表中的文本(链接)。这似乎行不通

我的代码:

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
}

这根本没有做任何事情，我是不是漏掉了什么？

Answer 1

可能有不同类型的问题:

• 图片网址错误
• 图片太大，左上角透明或与背景相同
• 等...

我建议你使用这个背景链接:

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

或至少尝试:

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

也许你应该把你的代码放到JsFiddle ，我们可以看到您的问题。