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

我在_Layout.cshtml文件的ActionLink中遇到了CSS问题

我更改了“Your logo here”文本，以反映通过CSS类在背景中绘制的图像，但它似乎无法加载图片

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

---

框显示在一个具有高度和宽度尺寸的块中，但是图片不显示，但是如果我使用FireBug inspect CSS，当我将鼠标悬停在CSS中的URL上时，它会很好地拉动图像。我是不是错过了一些显而易见的东西？

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

CssFolder
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;" 
    }
) 

---

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

CssFolder
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;" 
    }
) 

---

您也可以稍微更改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>

---

希望这有帮助

您也可以对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>

---

希望这能有所帮助

我实际上通过将直接路径（C:/）仍然置为空来再次检查这一点。但我会尝试上面的代码。出于某种原因，它工作得很好，但在CSS中它不喜欢它。是图像显示还是CSS在网页上不工作？图像显示使用上面的代码。但是，如果我尝试在CSS中使用一个类，它将不会显示。。即使位置完全相同。是的，我相信当你部署web应用程序时，会创建一些虚拟目录。它们可能与解决方案中的文件夹结构不同。这可能会导致图像无法显示。实际上，通过将直接路径（C:/）置为空，我对此进行了双重检查。但我会尝试上面的代码。出于某种原因，它工作得很好，但在CSS中它不喜欢它。是图像显示还是CSS在网页上不工作？图像显示使用上面的代码。但是，如果我尝试在CSS中使用一个类，它将不会显示。。即使位置完全相同。是的，我相信当你部署web应用程序时，会创建一些虚拟目录。它们可能与解决方案中的文件夹结构不同。这可能会导致图像无法显示。我遇到了相同的错误，这很简单，因为您和我从默认的MVC4.0应用程序复制了站点css，背景为：无。站点标题a、.站点标题a:悬停、.站点标题a:活动{背景：无；颜色：#c8c8c8；大纲：无；文本装饰：无；}我也遇到了同样的错误，这很简单，因为你&我从默认的MVC4.0应用程序复制了站点css，并且在后台：无。站点标题a、.站点标题a:悬停、.站点标题a:活动{背景：无；颜色：#c8c8c8；大纲：无；文本装饰：无；}