无法使用图像设置锚 <a> 样式答案

【问题标题】：Can't style an anchor <a> with an image无法使用图像设置锚 <a> 样式
【发布时间】：2016-01-02 12:41:55
【问题描述】：

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

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

我做错了什么？

【问题讨论】：

标签： html css asp.net-mvc image url-action

【解决方案1】：

您需要将样式设置为display: block;，并给它一个width 和一个height。

例子：

&lt;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;"&gt;&lt;/a&gt;

希望对你有帮助

【讨论】：

按照@Fred 的建议将其设置为inline-block 不是更明智吗？它将被使用 inline 所以按照我的想法，我们只需要“阻塞”它一点点。还是我混淆了这些概念？
取决于你想要达到的目标，如果要使用 inline 那么@Freds 的建议更明智。
谢谢。在任何情况下 +1 为 sn-p。

【解决方案2】：

确保您的<a> 标记的样式足够大以显示图像。默认情况下，此标签显示为 inline，并且您在 <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 替换为图片的实际尺寸即可。

【讨论】：

哦，我明白了。你会说这是一种更现代的使用图片样式的方法吗？
是的，我同意使用图像设置按钮/链接的样式更现代，但请注意不要让您的网站使用过多的图形，因为这会减慢初始页面加载和渲染速度（在较慢的设备上）。查看CSS sprites 以节省加载时间。