Html 如何使用CSS将图像添加到锚定标记?
我想在菜单栏上显示带有链接的图像。我的代码如下:Html 如何使用CSS将图像添加到锚定标记?,html,css,Html,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> 然后图像出现在背
<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>
然后图像出现在背景中。但我只想使用图像,而不是文本。我该怎么做?您必须在
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>
编辑:我忘了提到这意味着您必须从CSS中删除背景图像。使用以下代码:
05 2021
搜索引擎优化
添加用href元素包装的图像时要记住的事项。如果可能,尝试在href
元素内使用img
。这对搜索引擎优化有好处。如果图像加载失败,它将显示alt
文本
无论何时链接图像,谷歌都将使用图像的alt属性中包含的文本作为锚文本。-莫兹
src:
使用href
元素包装img
时,始终包含alt
文本。
这将作为href
元素的锚文本
<a href="#" class="login" title="Login">
<img src="../img/user.png" alt="User profile"/>
</a>
删除文本并定义宽度
。或者使文本透明:color:transparent
@ŠimeVidas:…如何?我是一个彻头彻尾的傻瓜。请解释一下,这种方法不会重复图像吗?一个通过登录类,另一个通过img标签?你说得对。我忘了提到这一点,这意味着你必须从CSS中删除背景图像。如果你像在答案底部那样直接将图像添加到a标记中,锚似乎会在图像下面溢出一点。我目前正试图在我正在开发的一个网站上消除这个bug。有什么建议吗?@user2662333你发现了吗?我有一个下划线问题well@ducu对我已经解决了。我在上面贴了一个问题,里面有很多小提琴和代码示例要看。我希望这对你有帮助。如果有帮助,请投上一票!以下是问题的链接: