CSS - 用图像替换URL文本

Question

我想将网址文本替换为图片。我正在努力追随：

HTML：

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

CSS：

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

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

PS。我不想把图像放在html中，即

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

Answer 1

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

要获得所需效果，请使用display: inline-block;。 （不会在IE中工作＆lt; 8我相信）

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

Answer 2

text-indent适用于块级元素，因此只需将display: block;或display: inline-block;添加到.img a CSS（这也会使width和{{ 1}}工作）。

Answer 3

将overflow: hidden与您当前的样式定义一起使用。

Answer 4

我不知道您应该使用的确切CSS技巧来完成这项工作 但据我所知，我可以提出一个建议 您不能将类名称设置为“img”，因为它已经是HTMl标记。 如果你为它写任何东西，那么该属性将被考虑用于<img>标签。

Answer 5

我对CSS知之甚少，但我想也许你可以制作一个表格。 然后在表单内创建一个提交按钮，其中包含动作，即当前链接的href。只要你设置submit button =“”的值，就可以很容易地做到这一点。