css - css mvc4 中的 Url.Content 概念实现

Question

我正在用 mvc4 构建一个应用程序。在编写 css 的一种情况下，我必须像往常一样使用图像。

我面临的问题是我为 css 做的嵌套越多，必须使用的“../”越多，因为我将图像保存在应用程序根目录的 Images 文件夹中，将 css 保存在 Content/themes/base/project .webiste 文件夹。

所以，这是我的 CSS。

.contact-form h1.contact-header
{ 
background:url(../../../../Images/contactform-head.png) no-repeat top left; width:113px;
}

我试图找到一些语义解决方案。我的意思是，不是计算“../”这样有意义的东西:

.contact-form h1.contact-header { background:url(~/Images/contactform-head.png) 左上角不重复；宽度:113px；

或

.contact-form h1.contact-header { background:@Url.Content(Images/contactform-head.png) 左上角不重复；宽度:113px；

我什至浏览了其他一些 stackoverflow 解决方案并进行了 goggling，但没有成功解决我的问题。其中大部分是关于创建 htmlhelper 来处理图像的 Url.Content。这解决了 .cshtml 文件或其他但不是 .css 的问题。 如果有人能提出我正在寻找的解决方案，我将非常感激，也感谢所有其他人抽出时间。

Answer 1

如果我是你，我会使用相对于元素根目录的路径。这样，您的文档在层次结构中的位置并不重要。 例如:

.contact-form h1.contact-header
{ 
  background:url('/images/contactform-head.png') no-repeat top left;
}

上面的写法意味着在网站根文件夹中有一个名为images 的文件夹，其中有一个名为contactform-head.png 的文件。从哪里引用它并不重要(只要它在同一个域中)。它会工作得很好。