CSS Background-Image拒绝在ASP.Net MVC中显示

Question

我在ASP.NET MVC 2应用程序中显示背景图像时遇到问题.目前,在〜/ Views/Shared/Site.master中,我将样式表的链接设置为:

<link href="<%:@Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />

我计划显示的图片在我的〜/ Content/Images/Designs.png中

这是我尝试过的

body
{
    background-image: url(~/Content/Images/designs.png); 
    background-repeat: repeat;  
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

其他尝试包括:

background-image: url(./Content/Images/designs.png); 
background-image: url(Content/Images/designs.png); 
background-image: url(Images/designs.png); 

以上尝试都没有奏效.我能做什么？

Answer 1

CSS文件中的url相对于CSS文件的位置.

所以如果我们假设你有~/content/foo.css,你想在~/images/foo.png这里包含如何引用它foo.css:

background-image: url(../images/foo.png); 

不要~在CSS文件中使用任何内容.它毫无意义.

因此,在您的情况下,如果CSS文件是,~/Content/Site.css并且您想要引用~/Content/Images/Designs.png正确的语法是:

background-image: url(images/designs.png); 

如果这对您不起作用,可能会有不同的原因:

• 该位置不存在图像
• 您没有为包含元素指定宽度和高度,因此您看不到图像

我建议你使用FireBug并检查相应的DOM元素,以确切地看到应用了哪些样式和图像.

Answer 2

这就是我必须做的事情:

background-image: url('@Url.Content("~/images/foo.png")')