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

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

Answer 2

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

在生产索引文件中，它的编写如下：

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

在bundleconfig：

 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",

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

2 个答案: