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")')

Answer 3

如果您使用bundle并具有以下目录结构：

-Content
--lightbox
---css
----lightbox.css
---imgages
----close.png

然后，您可以通过在该子目录中定义包来为子目录中的内容创建单独的包：

bundles.Add(new StyleBundle("~/Content/lightbox/css/bundle")
                .Include("~/Content/lightbox/css/lightbox.css"));


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

Answer 4

在我的情况下，我不得不退回到根目录并包含Content目录的路径。

所以即使我的目录结构如下：

-Content
--css
---site.css
--img
---someImg.png

我做不到

background-image: url(../img/someImg.png)

我必须做：

background-image: url(../../Content/img/someImg.png)

这在本地以调试模式（无缩小）工作，并正确部署到AWS（缩小）。

此外，不要忘记，如果您正在使用Bundle缩小，并且在CSS中使用@import仍然包含捆绑中的资产。例如：

main.css
@import url(../../Content/css/some.css)

一定要在你的包中加入some.css：

 bundles.Add(new StyleBundle("~/Content/global").Include(
                 "~/Content/css/some.css",
                 "~/Content/css/main.css"));

如果您使用LESS或SASS捆绑包，则无需执行此操作，因为处理程序知道如何查找文件并包含它们（这就是重点！）;但是，如果您将其作为直接CSS导入进行，则捆绑器在缩小时将不知道包含它。

希望这有助于某人！

Answer 5

它可能是浏览器中的缓存问题;也就是说，如果是css文件，浏览器可以缓存旧版本。清除缓存并重试。

Answer 6

使用下面的代码

.background {background-image：url（“../ Images / backimage.jpg”）;背景位置：继承; }

Answer 7

保持简单愚蠢。

在任何时候，尝试坚持使用css url属性的相对路径。

/* Assuming your Site.css is in the folder where "Images" folder is located */
/* Your Css Image url */

background-image: url("Images/YourImageUrl");

错误网址的问题是css无法找到该图像，因为它不理解该网址上使用的约定，因此不会显示图像。因此，为了保持简单，使用统治相对路径方法，你永远不会有问题。

Answer 8

对于任何遇到剃刀页面类似问题的人。您可以使用常规CSS表单，只需要使用文件夹级别。这避免了必须进行CSS内联。

• 使用普通的HTML / CSS body {background-image：url（“images / sparks.jpg”）;}
• 我的剃刀的文件夹结构 body {background-image：url（“../../ images / sparks.jpg”）;}

Answer 9

这适合我

     <div style="background-image:url('/images/home.jpg')">

我在我的项目中直接有图像文件夹所以我在url中使用

          /images/image.jpg 

喜欢

   <div style="background-image:url('/images/image.jpg')">