如何使用CSS将图像添加到锚标签？

我想用菜单栏上的链接显示图像。我的代码如下：在CSS如何使用CSS将图像添加到锚标签？

<a href="#" class="login" title="Login"></a>

登录类是如下：

.login{background: url(../img/user.png) no-repeat 6px center;}

但是，我不能够在浏览器中查看图像。如果我尝试像

<a href="#" class="login" title="Login">Login</a>

然后图像出现在背景中。但我只想使用图像而不是文字。我怎样才能做到这一点？

来源

2012-12-08 Bhushan Firake

删除文本，并定义一个'width'。或者使文本透明：'color：transparent'。 –

@ŠimeVidas：...怎么样？我是一个完整的noob..please解释 –

您必须在a标记上设置尺寸，并将其设置为display: block;。

.login { 
    background: url(../img/user.png) no-repeat 6px center; 
    width: 100px; 
    height: 100px; 
    display: block; 
}

当然，用正确的尺寸替换尺寸。

或者，你可以直接把图像到a标签，像这样：

<a href="#" class="login" title="Login"><img src="../img/user.png" /></a>

来源

2012-12-08 17:15:51

如果您直接将图像添加到您的答案底部的标记，锚点似乎溢出图像下方一点点。我目前正试图摆脱我正在工作的网站中的这个错误。有什么建议么？ – Rambo8000

@ user2662333你知道了吗？我也有下划线问题 – ducu

@ducu是的！我解决了它。我已经发布了一个问题，并且有很多小提琴和代码样本可供浏览。我希望这对你有所帮助。如果有帮助，请立即加注！这里是一个问题的链接：http://stackoverflow.com/questions/22864834/css-issue-with-jquery-ui-tabs/22865105#22865105 – Rambo8000

您可以使用以下方法：

<a href="#" class="login" title="Login"><img src="../img/user.png" /></a>

编辑：我忘了提，这将意味着你必须从CSS中删除背景图片。

来源

2012-12-08 17:15:55 neilvillareal

这种方法不会重复图像吗？一个通过登录类和其他通过img标签？ –

你说得对。我忘了提及这将意味着你必须从CSS中删除背景图像。 – neilvillareal

使用下面的代码：

<a href="#" class="navbar-brand" title="Home"><img src= {require('../img/image_namer.svg')} /></a>

来源

2018-03-01 01:51:14

如何使用CSS将图像添加到锚标签？

回答

相关问题