无法使用图片设置锚点 <a> 的样式

Question

根据 this answer，我应该能够按如下方式设置我的锚标记的样式。

<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

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

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

<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 替换为图片的实际尺寸即可。

Answer 2

您需要将样式设置为display: block;并给它一个width和一个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>

希望对您有所帮助

无法使用图片设置锚点 <a> 的样式

Can't style an anchor <a> with an image

html

css

asp.net-mvc

image

url-action