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如下:

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

它告诉css在images文件夹

中查找图片

这在我们的本地机器上使用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

因为它是相对于环境的。你可能有子域名/虚拟目录也会扰乱相对性

Answer 2

似乎我们在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

我需要渲染bundle到实际css所在的位置，使相对路径工作，像这样:

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