CSS Background image not displaying in ActionLink in MVC4

问题

I'm having an issue with the CSS in my ActionLink on the _Layout.cshtml file.

I changed the "Your logo here" text to reflect an image drawn in the background through a CSS class, however it seems to not load the picture..

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

The CSS is:

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

The box is displayed in a block with the height and width dimensions, however the picture doesn't display, yet if I use FireBug inspect CSS it pulls the image when I mouse-over the URL in the CSS just fine. Am I missing something painfully obvious with this?

回答1:

Are you sure that the pathing is correct? The URL you specify in CSS is relative to that CSS file.

CssFolder
styles.css
ImagesFolder
image.png

Alternatively you could use url.content to ensure you're taking the right path:

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

回答2:

You can change a little bit the html to achieve that as well:

Replace this

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

With this:

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

Hope this helps

来源：https://stackoverflow.com/questions/17311481/css-background-image-not-displaying-in-actionlink-in-mvc4

标签

css

asp.net-mvc-4

razor