显示图像而不是文本作为超链接

Question

如何在超链接中显示图片而不是文本？请看我的示例，您可以看到文本“x”和背景图像。我只想显示超链接的背景图像。

http://jsfiddle.net/8rfyT/

- sunjie

Answer 1

.cancel {
    background: url(http://www.softicons.com/download/web-icons/light-grey-square-icons-by-axialis-team/png/16/Cancel.png) center no-repeat;
    text-indent: -9999px;
    display: block;
    width: 16px;
    height: 16px;
}

将链接的display: block;设置为块级元素，这样您可以给它设置与背景图片相同的宽度和高度，然后使用text-indent隐藏实际文本。

您的fiddle已更新

- clairesuzy

---

谢谢。你能告诉我 text-indent: -9999px; 究竟是做什么的吗？ - sunjie

@sunjie 它缩进了文本（“实际X”）-通常用于给文本一个正向缩进，如悬挂段落，但在这种情况下，它是负向的，大量缩进，因此文本实际上远离页面左侧。 - clairesuzy

使用text-indent隐藏文本内容对SEO不利。尽管这取决于你正在做什么请参阅文章。 - Raynos

Answer 2

添加一个 span 并隐藏其内容。

<a href="" class="cancel" title="Cancel"><span>X</span></a>

.cancel span {display:none}

- Andreas

Answer 3

将链接中的 x 删除（并替换为空格）

<a href="" class="cancel" title="Cancel">&nbsp;</a>

将你的CSS更改为：

.cancel{
    width:58px; /* width of image */
    height:58px; /* height of image */
    display:block; /* block so always the whole image will be shown */
background:url(http://www.softicons.com/download/web-icons/light-grey-square-icons-by-axialis-team/png/16/Cancel.png) center no-repeat;


}

像这样：

http://jsfiddle.net/8rfyT/5/

- Tim

Answer 4

不要把文本放在 <a> </a> 标签之间，而是放一个 <img>

<a href="" class="cancel" title="Cancel">
<img src="http://www.softicons.com/download/web-icons/light-grey-square-icons-by-axialis-team/png/16/Cancel.png" />
</a>

- Connman

Answer 5

<p>Create a link of an image:
<a href="#">
<img src="smiley.gif" width="32" height="32" />
</a>

看这个简单的例子 http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_imglink

- abhiasawa

---

-1 对于 W3Schools 的参考资料。它不是一个好的信息来源。请遵循这个运动。 - Raynos

我发现那是一个非常适合初学者的好地方，我从那里学到了大部分基本的网页编程技能。 - abhiasawa

@sandeep，你在重复Raynos说的话，顺便说一下，我提供的信息是正确和准确的。 - abhiasawa

我没有检查Raynos的链接，但我们说的是同样的事情。 - sandeep