Question

大家。我试图给文本链接一个背景图像，但我没有运气，我没有出现任何图像。我想知道是否有人可以告诉我我的代码是否错误以及我可以做些什么来纠正它。感谢您提前提供任何帮助。

这是我的css代码，hlink和home是id，home是我对链接文本的定位

#hlink:link{
        background-image: url("../media/taboff.gif");
        color:#000000;
        text-decoration:none;
}

#hlink:visited{
        color:#000000;
        text-decoration:none;
}

#hlink:hover{
        /*background-image:url("../media/tab2.gif");*/
        text-decoration:underline;
        color:#EF504B;
}

#hlink:active{
        text-decoration:underline;
        color:#EF504B;
}

#home{
        position:absolute;
        font-size:2em;
        top:270px;
        left:300px;
        text-align:center;

这是我的HTML代码

<div id="home">
        <a id="hlink" href="midterm.html">Home</a>
</div>

编辑：我只想说谢谢你们所有人帮助我，你们每一个人都救了我的命，我不知道编辑是否会通知所有已经回答的人，但同样，非常感谢。除了一些丢失的代码，我最大的问题是我正在使用的图像本身，这是我的下一个要纠正的问题。我测试了一个不同的图像，它100％工作，所以感谢大家。我也是比较新的，我是大学新生，只做了几个星期（我也有一个可怕的教授，但这是另一个故事）但我很高兴找到这样的一个乐于助人的社区，希望有一天我能够为自己做出贡献。

Answer 1

适合我：http://jsfiddle.net/GTHyU/

我的猜测是，您的url()相对于您的HTML页面而不是您的CSS文件？首先尝试使用绝对URL并查看它是否开始工作，然后根据CSS文件的位置找出所需的相应路径。

Answer 2

尝试这样

#hlink{
        background:transparent url(../media/taboff.gif) repeat-x 0 0;
        color:#000000;
        text-decoration:none;
}

检查http://jsfiddle.net/nh7nY/

处的工作示例

Answer 3

将这些样式添加到每个链接：

display: block;
width:100px;
height:100px;

这应该使背景图像出现。您可以更改高度和宽度以满足您的要求。

Answer 4

试试这个：

#hlink:link {background:url(images/media_library.png) no-repeat top left}

给文本链接一个背景图像？

4 个答案:

检查http://jsfiddle.net/nh7nY/