CSS在MVC4中的ActionLink中不显示背景图像 [英] CSS Background image not displaying in ActionLink in MVC4

问题描述

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

我更改了您的徽标在这里文本以反映图像通过CSS类在背景中绘制，但它似乎不加载图片。

 < p class = -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中指定的网址是相对于该CSS文件。

CssFolder

      styles.css

ImagesFolder

      image.png

或者，您可以使用url.content确保您采取正确的路径：

  @ Html.ActionLink $ b，
Index，
Home，
 new {
 style =background：url（'+ Url.Content yourimage.png）+'）no-repeat center right; display：block; height：84px; width：585px;
} 
）
  / pre> 
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?
解决方案
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;" 
    }
) 


                        
这篇关于CSS在MVC4中的ActionLink中不显示背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！