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

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>

Answer 2

您可以使用以下内容：

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

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

Answer 3

使用以下代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

05 2021

用于搜索引擎优化

添加用 href 元素包裹的图像时要记住的一些事情。如果可能，请尝试在 img 元素中使用 href。这对 seo 有好处。如果图片加载失败，它会显示alt 文本。

<块引用>

每当链接图像时，Google 都会使用图像的 alt 属性中包含的文本作为锚文本。 - 莫兹

源代码：https://moz.com/learn/seo/anchor-text

当您用 img 元素包裹 href 时，请始终包含 alt 文本。
这将作为您的 href 元素的锚文本。

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