CSS Background-Image拒绝在ASP.Net MVC中显示 [英] CSS Background-Image refuses to display in ASP.Net MVC

问题描述

我无法在ASP.NET MVC 2应用程序中显示背景图像.当前，在〜/Views/Shared/Site.master中，我将指向样式表的链接设置为:

I am having trouble displaying an background image in my ASP.NET MVC 2 application. Currently, In ~/Views/Shared/Site.master, I set my link to the style sheet to:

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

我打算显示的图像在我的〜/Content/Images/Designs.png

The image I plan to display is in my ~/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); 

以上尝试均无效.我该怎么办?

none of the above tries worked. What can I do?

推荐答案

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

The url inside a CSS file is relative to the location of the CSS file.

因此，如果我们假设您有~/content/foo.css并且要包含~/images/foo.png，则以下是在foo.css中引用它的方法:

So if we suppose that you have ~/content/foo.css and you want to include ~/images/foo.png here's how to reference it inside foo.css:

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

请勿在CSS文件中使用任何~.没有意义.

Don't use any ~ inside a CSS file. It has no meaning.

因此，如果您的CSS文件是~/Content/Site.css，并且您想引用~/Content/Images/Designs.png，则正确的语法是:

So in your case if the CSS file is ~/Content/Site.css and you want to reference ~/Content/Images/Designs.png the correct syntax is:

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

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

If this doesn't work for you there might be different causes:

• 该位置不存在图片
• 您没有为包含的元素指定宽度和高度，所以您看不到图像

我建议您使用FireBug并检查相应的DOM元素，以确切了解对其应用了哪些样式和图像.

What I would recommend you is to use FireBug and inspect the corresopnding DOM element to see exactly what styles and images are applied to it.

这篇关于CSS Background-Image拒绝在ASP.Net MVC中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！