Html 如何使用 CSS 将图像添加到锚标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13779787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add an image to an anchor tag using CSS?
提问by Bhushan Firake
I want to show an image with the link on the menubar. My code is as below:
我想在菜单栏上显示带有链接的图像。我的代码如下：
<a href="#" class="login" title="Login"></a>
The login class in css is as below:
css中的登录类如下：
.login{background: url(../img/user.png) no-repeat 6px center;}
But, I am not able to view the image in the browser. If I tried like
但是，我无法在浏览器中查看图像。如果我尝试像
<a href="#" class="login" title="Login">Login</a>
then image appears in the background. But I want to use only image and not the text. how can I do that?
然后图像出现在背景中。但我只想使用图像而不是文本。我怎样才能做到这一点？
回答by Jan Han?i?
You'll have to set dimensions on the atag, and set it to display: block;.
您必须在a标签上设置尺寸，并将其设置为display: block;.
.login {
background: url(../img/user.png) no-repeat 6px center;
width: 100px;
height: 100px;
display: block;
}
Of course replace dimensions with the correct ones.
当然，用正确的尺寸替换尺寸。
Alternatively you could put the image directly into the atag like so:
或者，您可以将图像直接放入a标签中，如下所示：
<a href="#" class="login" title="Login"><img src="../img/user.png" /></a>
<a href="#" class="login" title="Login"><img src="../img/user.png" /></a>
回答by neilvillareal
You can use the following:
您可以使用以下内容：
<a href="#" class="login" title="Login"><img src="../img/user.png" /></a>
EDIT: I forgot to mention this would mean you have to remove the background image from your CSS.
编辑：我忘了提到这意味着您必须从 CSS 中删除背景图像。
回答by Murtaza Manasawala
Use the following code:
使用以下代码：
<a href="#" class="navbar-brand" title="Home"><img src= {require('../img/image_namer.svg')} /></a>