Question

我正在审查一个网站，我在asp.net-mvc网站上查看了很多关于如何在CSS中引用图像的不同惯例。

，包括：

完整路径：

.ddTitle span.arrow {
    background: url('/content/images/dd_arrow.gif') no-repeat 0 0;
}

与css所在地相比的相对位置：

#cluetip-waitimage {
    background-image: url(jQueryUI/images/ui-anim_basic_16x16.gif);  
}

与“..”相关

#cluetip-waitimage {
    background-image: url(../../jQueryUI/images/ui-anim_basic_16x16.gif);  
}

在asp.net-mvc中，有路由等。。一个是正确的，另一个是错的还是这只是偏好或惯例？假设此站点可能与其他站点位于共享环境中。

Answer 1

如果您的应用程序始终位于网站的根文件夹中（或者至少您的图像都将位于根文件夹中），那么您的第一个选项就完全没了问题。如果您在不同的情况下可能有不同的路径（比如在开发或测试时有共享站点），那么这不起作用。

第二个和第三个选项基本相同。使用哪一个完全取决于图像相对于CSS文件的位置。我个人认为第二个看起来更干净，所以我尝试将我的CSS文件引用的任何图像放在相对于CSS所在位置的文件夹结构中。但是，有些人喜欢将所有图像保存在一个地方（甚至将内容图像与网站“chrome”图像混合在一起），因此可能需要使用../的相对路径才能实现此目的。

Answer 2

我通常这样做......

background-image: url('/jQuery/images/ui-anim_basic_16x16.gif');

开头/表示根文件夹，因此您的所有路径都可以相对于程序的根目录而不是运行页面的文件夹。这增加了一点点输入，但它消除了很多父哈希的问题。

所以如果你的图像是这样的......

解
- 控制器
- 内容
  - JQuery的
    - 图像

您的路径为background-image: url('/content/jquery/images/ui-anim_basic_16x16.gif');

这样做可以消除任何类型路径的大部分含义。因为ASP.NET作为一种语言理解相对URL的概念，所以这应该适用于任何情况，除非你托管它的服务器有一些非常笨拙的配置 - 在这种情况下，标准和实践也不会让你远。

根据我的经验，Root-Relative urls还使您的应用程序更加模块化。可能有更多有经验的程序员在这里可以用一个理由反驳这一点，但是从我构建的所有东西开始，使我的所有图像URL根目录相关允许我将我的程序放入任何文件夹并运行它而不会造成复杂。

Answer 3

我有一个类似的问题。由于MVC允许使用〜/（例如在razor视图中）来表示应用程序根目录，我想知道是否应该对我的CSS文件中的图像路径进行此操作。

当然，由于CSS文件未在服务器端处理，因此无法正常工作。但我认为正确的方法是使用相对路径。这应该没问题，因为CSS文件的路径（例如布局）可以使用〜/然后修复从CSS文件到图像的路径;应用程序根目录的位置并不重要......或者布局或主视图是否位于不同的区域。

在asp.net.mvc中，在css中引用图像的正确方法是什么

3 个答案: