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

本文关键字：MVC4 ActionLink 显示 背景 图像 CSS | 更新日期: 2023-09-27 18:19:50

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

我更改了"Your logo here"文本，以反映通过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上时，它会很好地拉动图像。我是不是错过了一些显而易见的痛苦？

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

您也可以更改一点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>

希望这能帮助

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

CsFolder
 nbsp nbsp nbsp；styles.css
图片文件夹
 nbsp nbsp nbsp 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;" 
    }
)
相关文章：