处理CSS&；ASP.NET MVC中的图像

您好，我正在开发一个基于ASP.NET MVC的简单应用程序。我已将默认的master.css更改为我自己的样式。现在唯一的问题是，我正在将背景图像属性添加到我的UL->Li->A中，以创建菜单。它在firefox中运行良好，但在InternetExplorer（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>

是的，我试过了。/图像/。。。但它仍然不起作用

下面是我的文件夹层次结构 解决方案->内容 Site.css 图像 logo.jpg leftbarlightblue.jpg ->控制器 ->模型 ->观点 家 共享 地点，主人

---

添加XHTMLfor#nav菜单，如果您有此问题帖子的实时链接，我猜显示取决于url

你的master.css在哪里

---

您是否尝试过使用

url（'Images/leftbarlightblue.jpg'）

？

如果您经常使用CSS，我真的建议您使用FireFox和FireBug，它将使您能够动态查看样式表，并确切了解某些东西不起作用的原因

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

在单独的音符上，背景位置应为水平位置，后跟真实位置

---

背景位置：左下

我发现了这个问题，图像是用CMYK创建的。所以FF用近似的颜色显示它们，而Internet explorer完全忽略了它们。更改格式可以解决此问题。谢谢大家的帮助。

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

Solution -> Content Site.css Images logo.jpg leftbarlightblue.jpg ->Controllers -> Models ->Views Home Shared Site.Master 而不是

/images/image.jpg

---

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

样式表需要使用文字路径，如下所示：

../../images/image.jpg

而不是

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

---

目录结构将有助于tooThanks寻求帮助，我在FF中有Firebug，在IE中也有开发者工具，我再次检查了你的建议，将leftbarlightblue.jpg放在html页面中。同样的问题再次存在，它在FIREFOX中正确显示，但在IE 6/7/8中没有，如果你直接在IE中浏览图像，它会显示吗？我只看到了ever在一个浏览器中看到一个图像，但在另一个浏览器中看到的图像有点“不可靠”。在编辑器中打开图像并重新保存，然后再次尝试加载图像，确保缓存已清除。另请参见Firefox 2无法显示CMYK JPEG，但Firefox 3可以。

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