0

所以我试图用图像替换列表中的文本（链接）。这似乎不起作用

我的代码：

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
}

这根本没有做任何事情，我错过了什么吗？

4

3 回答 3

1

使用引号是一个好习惯

  background: url("small_anna.gif");

顺便一提...

绝对定位元素将始终将浮点计算为值“无”。所以#headeranna float:right;中的声明 没有必要。

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

你可以看到这个背景在这里工作小提琴 （我只为示例目标修改了一些边距值）

于 2013-05-12T14:08:15.433 回答
1

可能有不同类型的问题：

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

我建议你使用这个后台链接：

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-12T14:02:59.650 回答
0

在你的 CSS 中试试这个

#annaklein{
list-style-type: none;
list-style-image:url("small_anna.gif");
width: 26px;
height: 26px;
text-indent: -9999px;}
于 2013-05-12T14:46:47.920 回答