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，我们可以看到您的问题。

Answer 2

使用引号

是一种好习惯

  background: url("small_anna.gif");

顺便说一句......

绝对定位元素将始终计算浮点值为“无”。所以#headeranna float：right; 中的声明不是必需的。

请注意图像的路径与文档相关

您可以在此处看到此背景fiddle （我为示例目标修改了一些边距值）

Answer 3

在CSS中试试这个

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

用图像替换列表中的文本

3 个答案: