CSS背景图像未显示在MVC4的ActionLink中

Question

_Layout.cshtml文件上的ActionLink中的CSS出现问题。

我更改了“您的徽标在这里”文本，以反映通过CSS类在后台绘制的图像，但是似乎无法加载图片。

<p class="site-title">@Html.ActionLink(" ", "Index", "Home", null, new { @class = "sitelogo" })</p>

CSS是：

.sitelogo {
background: url("../Images/topLogo.png") no-repeat center right;
display: block;
height: 84px;
width: 585px;

该框显示为具有高度和宽度尺寸的块，但是未显示图片，但是，如果我使用FireBug检查CSS，当我将鼠标悬停在CSS中的URL上时，它将拉出图像。 我是否为此遗漏了一些痛苦的显而易见的东西？

Answer 1

您也可以更改html来实现这一点：

取代这个

@Html.ActionLink(" ", "Index", "Home", null, new { @class = "sitelogo" })

有了这个：

<a href="@Url.Action("Index", "Home")">
    <img alt="your logo" src="@Url.Content("~/Images/<YOUR LOGO>")" />
</a>

希望这可以帮助

Answer 2

您确定路径正确吗？ 您在CSS中指定的URL是相对于该CSS文件的。

Css文件夹
styles.css
图片文件夹
image.png

另外，您可以使用url.content来确保您使用正确的路径：

@Html.ActionLink(
    " ", 
    "Index", 
    "Home", 
    new { 
        style = "background: url('" + Url.Content("~/Images/yourimage.png") + "') no-repeat center right; display:block; height:84px; width:585px;" 
    }
)