我想在菜单栏上显示带有链接的图像。我的代码如下:
<a href="#" class="login" title="Login"></a>
css中的登录类如下:
.login{background: url(../img/user.png) no-repeat 6px center;}
但是,我无法在浏览器中查看图像。如果我尝试了
<a href="#" class="login" title="Login">Login</a>
然后图像出现在背景中。但我想只使用图像而不是文本。我怎样才能做到这一点?
你必须在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>
您可以使用以下内容:
<a href="#" class="login" title="Login"><img src="../img/user.png" /></a>
编辑:我忘了提到这意味着你必须从CSS中删除背景图像。
使用以下代码:
<a href="#" class="navbar-brand" title="Home"><img src= {require('../img/image_namer.svg')} /></a>