Display image instead of text for hyperlink

How can I display an image instead of a text for a hyperlink? Please see my example, here you can see the text "x" 开发者_如何转开发and the background image. I want to show only the background image for the hyperlink.

http://jsfiddle.net/8rfyT/

.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;
}

make the link display: block; so you can give it the width and height of the background image, then use text-indent to hide the actual text

Your fiddle updated

Add a span and hide it's content.

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

.cancel span {display:none}

Instead of putting text between the <a> </a> tags, put an <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>

Remove the x in your link (and replace it by a white-space)

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

Change your css to:

.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;


}

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

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

see this simple example http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_imglink