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文件中使用任何~/Content/Site.css。它毫无意义。

所以在你的情况下，如果CSS文件是~/Content/Images/Designs.png并且你想引用background-image: url(images/designs.png);，那么正确的语法是：

{{1}}

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

该位置不存在图片
您未指定包含元素的宽度和高度，因此您看不到图像

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

Answer 2

这就是我必须做的事情：

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

Answer 3

如果您使用捆绑软件，并且目录结构如：

-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（缩小）。

另外，如果您正在使用捆绑缩小功能并且在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-image：url（＆＃34; ../ Images / backimage.jpg＆＃34;）; 背景位置：继承; }

Answer 7

这对我有用

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

由于我的项目中直接包含图片，因此我在网址中使用

          /images/image.jpg

喜欢

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

Answer 8

保持简单愚蠢。

始终尝试使用css url属性坚持相对路径。

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

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

URL错误的问题是CSS无法定位该图像，因为它不了解该URL上使用的约定，因此无法显示该图像。因此，使用统治性的相对路径方法使其简单易行，您永远不会遇到问题。

Answer 9

适用于在剃刀页面上遇到类似问题的任何人。您可以使用常规的CSS表单，只需使用文件夹级别即可。这样可以避免内联CSS。

使用常规HTML / CSS

body {background-image：url（“ images / sparks.jpg”）;}
我的剃须刀文件夹结构

body {background-image：url（“ ../../ images / sparks.jpg”）;}

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

9 个答案: