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鼠标悬停在CSS上时它会拉动图像。我错过了一些令人痛苦的事吗？

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文件的。

CssFolder
styles.css
ImagesFolder
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背景图像不在MVC4中的ActionLink中显示

2 个答案: