在 ASP.NET 中使用外部 CSS 文件显示背景图像的问题答案

【问题标题】：Problems displaying background image using external CSS file in ASP.NET在 ASP.NET 中使用外部 CSS 文件显示背景图像的问题
【发布时间】：2013-12-10 15:45:39
【问题描述】：

我正在使用 Visual Studio 2013 和 asp.net，我正在尝试学习如何编写一个基本的网站。不幸的是，我很难将包含在外部 css 样式表中的样式属性应用于 asp.net 应用程序母版页上的 <a> 元素。我很感激这个问题被问了很多次，但我似乎无法让任何解决方案对我有用。

我的应用程序的一些文件结构是；

- MyApplication
    -Content
        Site.css
    -Images
        nav_bgrnd.gif
        nav_divider.gif

我的母版页的 head 部分中有以下“链接”元素；

<head runat="server">

<link rel="stylesheet" type="text/css" href="~/content/Site.css" runat="server"/>

</head>

我在母版页的 html 正文中有以下菜单项；

 <nav id="navformenu" style="width:910px; height:32px; position: relative; top:-5px; background:none;" >
        <ul id="menu" class="menu">
            <li class="menuli" >
                <a id="about" runat="server" class="menulia"  href="~/Home"  >Home</a>
            </li>
            <li  class="menuli">
                <a id="about" runat="server" class="menulia"  href="~/About"  >About</a>
            </li>
            <li  class="menuli">
                <a id="contact" runat="server" class="menulia" href="~/Contact">Contact</a>
            </li>
            <li  class="menuli">
                <a id="mynewpage" runat="server" class="menulia" href="~/WebForm1" >MyNewPage</a>
            </li>              
        </ul>
    </nav>

最后 Site.css 看起来像；

.menu
{
    width:910px; 
    background: #fff url(/Images/nav_bgrnd.gif) top repeat-x;
    height:32px; 
    position:relative; 
    z-index:1000;
}

.menuli
{
    margin:0 2px 0 -3px; 
    font-size:11px; 
    line-height:21px; 
    padding:0 16px 0 0; 
    display:inline; 
    height:32px; 
    display:block;
    float:left;    
}

.menulia
{     
   background: transparent url(/images/nav_divider.gif) left 9px no-repeat;   
   font-family:serif;
   font-weight:normal;
   padding: 6px 0 10px 15px; 
   color:#010304; 
   font-size:18px;
   display:block; 
   height: 41px; 

}

母版页正确引用了 css 文件，因为如果我更改字体大小，例如在 .menulia 类中，那么这会反映在 Visual Studio 设计器和 Firefox 的 Default.aspx 网页中。但图像不显示。相比之下，当我直接使用 style="LOTS OF CODE" 将所有 css 样式代码放入 html 代码中时，就会找到图像。

任何帮助将不胜感激。

【问题讨论】：

要从 CSS 中引用图像文件，试试这个：url(../images/nav_divider.gif)

标签： asp.net css background master-pages

【解决方案1】：

您还需要更改图片的路径：您有

/Images/nav_bgrnd.gif

但是您需要进行设置以搜索正确的文件夹，因此请为此更改它

../Images/nav_bgrnd.gif

您正在设置与另一个元素相关的路径，而不是CSS，您可以查看更多here 和here

【讨论】：

感谢丹科。我确实尝试过，但没有奏效。然后我意识到我发布的代码下面有大量的 css 代码（我正在修改来自 Visual Studio 的示例 asp.net 应用程序之一）。因此，css 代码的后期部分之一是覆盖您建议的 ../ 代码。当我删除所有其他代码以便我的 css 文件与此处发布的一样时，您的建议将起作用。谢谢。

【解决方案2】：

您需要像这样设置完整路径：

(MyApplication/Images/nav_bgrnd.gif)

我常用的 asp -VS 我总是这样：

assets/images/image.jpg，永远不会有问题。

【讨论】：

感谢Riskbreaker 的回复。我试过你的建议，但这没有用。唯一似乎可以解决问题的是“../”符号。