CSS背景图像路径在生产环境中翻译不同？

Question

这是我们的网站结构

main application
   sub application (index file using css is located here)
      content
         assets
            css (CSS file located here)
            images (image located here)

在css文件中，我们使用的是带有相对url的bacground映像，如下所示：

background: #ffffff url("../images/bodybg.png") repeat;

因此，它告诉css在图像文件夹中查找一个级别的图像。

这可以在我们的本地机器上使用IIS。翻译为：

http://localhost/subapplication/content/assets/images/bodybg.png

但是，在我们的生产环境中，也在IIS上，这被转换为：

https://www.oursite.com/images/bodybg.png

我尝试更改为根相对路径：

background: #ffffff url("/subapplication/content/assets/images/bodybg.png") repeat;

这解决了这个问题，但是有人知道为什么相对css路径在两个环境中有两个结果吗？

Answer 1

看来，我们在ASP.NET MVC 5中使用捆绑的方式导致了这种情况。

在生产索引文件中，它是这样写的：

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

在邦德莱诺图中：

 bundles
     .Add(new StyleBundle("~/Content/main")
                    .Include("~/Content/assets/css/main.css",

这意味着在代码索引文件中使用根相对路径：

/subapplication/Content/main?v=12341234lmkelmk

我需要将包呈现到实际css所在的位置，以使相对路径工作，如下所示：

@Styles.Render("~/Content/main/assets/css/main")

 bundles
         .Add(new StyleBundle("~/Content/main/assets/css/main")
                        .Include("~/Content/assets/css/main.css",

Answer 2

因为它与环境有关。您可能也有子域/虚拟目录，它们破坏了相关性。