html - 如何使用 CSS 将图像添加到 anchor 标记？

Question

我想在菜单栏上显示带有链接的图像。我的代码如下:

  <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>

然后图像出现在背景中。但我只想使用图像而不是文本。我该怎么做？

Answer 1

您必须在 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>