在 ASP.NET MVC 中处理 CSS 和图像

Question

您好，我正在开发一个基于 ASP.NET MVC 的简单应用程序。我已将默认的 master.css 更改为我自己的样式。现在唯一的问题是我将 background-image 属性添加到我的 UL->Li->A 之一以创建菜单。它在 Firefox 中运行良好，但图像在 Internet Explorer (IE7/8) 中根本没有显示。 有谁知道出了什么问题？

我的 CSS 正在关注；

     #nav-menu ul
{
    list-style: none;
    padding: 0;
    margin: 0;
    color:White;
}
#nav-menu li
{
    /*float: left;*/
    margin: 0.15em 0.15em;
    display:block;

}

#nav-menu li a
{
    background-image: url('/Images/leftbarlightblue.jpg');
    background-repeat:no-repeat;
    background-position:bottom;

    height: 2em;
    line-height: 2em;   
    width: 12em;
    display: block;
    text-decoration: none;
    text-align: center;
    color: white;
}

#nav-menu li a:hover
{
    background-image: url('./Images/leftbardarkblue.jpg');
    background-repeat:no-repeat;
    background-position:bottom;

    height: 2em;
    line-height: 2em;

    width: 12em;
    display: block;

    color: white;
    text-decoration: none;
    text-align: center;
}
#nav-menu
{
    width:15em
} 

而 XHTML 是

<div id="menucontainer">
            <div id="nav-menu">
                <ul>
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("About Us", "About", "Home")%></li>                
                </ul>
            </div>

    </div>

1. 是的，我用 ./Images/... 试过了，但还是不行。

2. 以下是我的文件夹层次结构

   解决方案 -> 内容
                  网站.css
                  图片
                         标志.jpg
                         leftbarlightblue.jpg
          ->控制器
          -> 模型
          ->视图
                家
                共享
                        Site.Master
   

Answer 1

您的样式表需要使用如下文字路径：

background-image: url('/Content/Images/leftbarlightblue.jpg');

而不是

background-image: url('/Images/leftbarlightblue.jpg');

Answer 2

如果您经常使用 CSS，我真的建议您使用 FireFox 和 FireBug，它可以让您即时查看样式表，并确切了解为什么某些事情无法正常工作。

接下来，您是否仔细检查了图片的 URL 是否正确？一种快速的检查方法是获取绝对 URL（在浏览器中浏览它以确保它应该类似于 http://myapp/content/images/leftbarlightblue.jpg）并将其放置在您的代码中，而不是您的旧图像 URL。如果加载，那么可能是您的相对路径错误（../ 部分），因为我不知道您的文件夹结构，我无法帮助您了解它应该是什么。

在单独的音符上，背景位置应该是水平位置后跟垂直位置。

背景位置：左下；

Answer 3

我猜显示取决于网址。

你的 master.css 在哪里？

您尝试过url('Images/leftbarlightblue.jpg') 吗？

Answer 4

我遇到了问题，图像是使用 CMYK 创建的。所以 FF 使用近似颜色显示它们，而 Internet Explorer 完全忽略它们。更改格式可以解决问题。谢谢你们的帮助。

Answer 5

为#nav-menu 添加XHTML，如果你也有这个问题帖子的实时链接

Answer 6

尝试不使用所有额外的点和斜线来启动图像路径。例如：

/images/image.jpg

代替

../../images/image.jpg

我仍然不确定文件是如何存储在您的实际网络服务器上的，因此您可能需要添加一个或两个目录，但通常使用点告诉服务器目录中的级别是不明智的树（而且很多人忘记了您需要指定从 CSS 文件的位置看到的图像的位置，而不一定是 HTML/ASP 文件的位置）