css - 将 css 文件移动到新的 css 文件夹后，无法从 css 访问我的图片

Question

在更新我的 css 之前，我在 Login.css 中有以下内容：

body
{    
  background-image: url('./pictures/fond.png');    
  background-repeat: repeat-x;
}

这是我的结构：

在此处输入图像描述

现在我有以下CSS：

body
{    
  background-image: url('../pictures/fond.png');    
  background-repeat: repeat-x;
}

请注意网址中的双点。

这是我的新结构：

在此处输入图像描述

我的问题：在我的 IIS 测试服务器上发布时，我看不到我的图片！？在本地开发机器（VS2012）上，我可以看到我的图片。

但是，如果我更新位于 IIS 测试服务器中的 Login.css 并将我的双点替换为单点，它会再次起作用。这不合逻辑，因为（在我更新之后） Login.css 现在位于 css 文件夹下。

任何的想法？

谢谢。

更新 - - - - - - - -

这是我引用我的CSS的方式：

bundles.Add(new StyleBundle("~/Content/bundleLogin").Include(
            "~/Content/css/bootstrap.css",
            "~/Content/css/Login.css"));

我创建了一个包，然后：

@Styles.Render("~/Content/bundleLogin")

score 0 · Accepted Answer

我敢打赌，您已经在视图中硬编码了 CSS 文件的路径，如下所示：

<link href="Content/css/Login.css" rel="stylesheet" type="text/css" />

而不是正确的方式当然是使用 url helper：

<link href="@Url.Content("~/Content/css/Login.css")" rel="stylesheet" type="text/css" />

就您的 CSS 文件而言，您在其中引用的所有 url（例如图像）总是相对于 CSS 文件的当前位置。因此，如果您正确引用您的 CSS 文件，您将不会遇到任何问题。使用url('../pictures/fond.png');的是正确的相对位置。

更新：

哦，我看到了问题。您正在使用捆绑包。好吧，bundle 的问题在于您声明 bundle 名称的方式，您没有与物理结构相同级别的文件夹嵌套。所以像这样修改你的包：

bundles.Add(new StyleBundle("~/Content/css/bundleLogin").Include(
        "~/Content/css/bootstrap.css",
        "~/Content/css/Login.css"));

进而：

@Styles.Render("~/Content/css/bundleLogin")

1 回答 1