html - 无法使用图像设置锚点样式

Question

根据这个答案，我应该能够按如下方式设置我的锚标记。

<a href="@Url.Action("Index", "Home")" 
   style="background: no-repeat url(../../Images/Logo.png) 0 0"></a>

但是，我注意到它没有按预期工作，因为图像没有出现在屏幕上。但是，如果我在里面创建一个图像标签，它就可以了。

<a href="@Url.Action("Index", "Home")">
  <img src="../../Images/Logo.png" />
</a>

我更喜欢使用第二种方法，但我担心它是老派的，今天建议使用样式来添加图像而不是标记。所以，我自然想拥抱新的方式。

我究竟做错了什么？

Answer 1

您需要将样式设置为display: block;并赋予它 awidth和 a height。

例子：

<a href="@Url.Action('Index', 'Home')" style="background: no-repeat url(https://wiki.mageia.org/mw-en/images/thumb/c/c8/Chromium-64px-logo.png/35px-Chromium-64px-logo.png) 0 0; display: block; width: 50px; height: 50px;"></a>

希望这可以帮助

Answer 2

确保您的<a>标签的样式足够大以显示图像。默认情况下，这个标签是内联显示的，并且你没有在<a>和</a>标签之间给出任何内容，因此浏览器根本不会为这个元素分配屏幕空间。

我建议为您的内联样式属性添加一些规则（老实说，最好还是在样式表中）：-

<a href="@Url.Action("Index", "Home")" style="
   background: no-repeat url(../../Images/Logo.png) 0 0; 
   display: inline-block; 
   width: 30px; 
   height: 20px"></a>

只需将 30px 和 20px 替换为图像的实际尺寸即可。