Question

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

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隐藏实际文字

Your fiddle updated

Answer 2

添加范围并隐藏其内容。

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

.cancel span {display:none}

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/

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>

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

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

5 个答案:

Your fiddle updated