html - CSS - 用图像替换 URL 文本

Question

我想将 url 的文本替换为图像。我正在尝试以下操作:

HTML:

<div class="img">
    <a href="#">link</a>                    
</div>

CSS:

.img a{
    width: 96px; 
    height: 96px; 
    background: url("image.jpg"); 
    text-indent: -9999px; 
}

它仍然会显示文本。我想要图片而不是文字。

附言。我不想将图像放在 html 中，即。

<div class="img">
 <a href="#"><img src="image.jpg" alt="image" /></a>                
</div>

Answer 1

根据定义， anchor 标记是内联元素，因此不接受高度或宽度声明。

要获得您想要的效果，请使用display: inline-block;。 (我相信在 IE<8 中不起作用)

.img a{
    display: inline-block;
    width: 96px; 
    height: 96px; 
    background: url("image.jpg"); 
    text-indent: -9999px; 
}