CSS背景图像拒绝在ASP.NETMVC中显示

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

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

其他尝试包括：

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

---

上述尝试均无效。我能做什么？

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元素，以查看应用于它的样式和图像。

这可能是浏览器中的缓存问题；也就是说，如果css文件不可用，浏览器可能会缓存旧版本。清除缓存并重试。

这是我必须做的：

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

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

使用下面的代码

.背景 { 背景图像：url（“../Images/backimage.jpg”）； 背景位置：继承；

---

}

在我的例子中，我必须返回到根目录，并包含到内容目录的路径

所以即使我的目录结构看起来像：

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

我做不到

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

我必须做：

background-image: url('@Url.Content("~/images/foo.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"));

如果您使用较少或SASS绑定器，则无需执行此操作，因为处理程序知道如何查找文件并包含它们（这就是重点！）；但是，如果您将它作为一个直接的CSS导入，那么当它缩小时，绑定器将不知道要包含它

---

希望这对别人有帮助

如果您使用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); 

这对我有用

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

像

保持简单愚蠢

在任何时候，尝试使用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上使用的约定，因此图像不会显示。因此，为了保持简单，请使用支配相对路径方法，您将永远不会遇到问题。

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

• 使用普通HTML/CSS
  body{background image:url（“images/sparks.jpg”）；}

• razor的我的文件夹结构
  正文{背景图像：url（“../../images/sparks.jpg”）；}

---

我建议只需拖放图像即可。Visual Studio将自动为您生成代码

身体 { 背景图像：url（'../../Content/Images/dark123.jpg'）； }

此URL代码由Visual Studio自动生成，您无需手动编写代码

希望这能解决你的问题

---

---

干杯

您是否尝试过

。/Content/Images/designs.png

对不起，手指滑落了。我的意思是

。

而不是

~

。你在什么地方没有任何模糊的“区分大小写的文件名”开关，是吗？文件名都是小写的。非常积极啊。。。你说名称是

Designs.png

，你试图用

Designs.png

显示它。好的，重点是，图像文件夹在内容文件夹（css所在的位置）中，这就是我尝试背景图像的时候：url（./content/images/Designs.png）；背景图片：url（Content/Images/designs.png）；背景图片：url（Images/designs.png）；正确的语法是

backgroundimage:url（images/designs.png）@MrLister，是的，这很有效。如果没有，还有其他原因。不是因为他的url错了。@EonRustedduPlessis等等，你是说你同时尝试了所有这些东西吗？头痛。。。XD I将主体的宽度和高度分别指定为100%。我把我的行改成了你的行（图片文件夹是大写的，图片）别以为是这样，我的朋友和我都在做完全相同的应用程序，我们在练习mvc。一切仍处于默认状态。现在我们从css开始，将Images文件夹添加到content文件夹，并将designs.png添加到Images文件夹。我们将site.master中的链接更改为deploy friendly notation，并更改了body标签：去掉背景色并添加背景图像：url（Images/designs.png），所以这是一个全新的网页？正文中至少有一些内容吗？我将投票表决，因为这也是我遵循的第一步，不确定它是否修复了它。我得到的关于修复+从中学习的最接近的答案来自darinOK。很高兴问题解决了！这只有在css是内联的情况下才有效。因为默认情况下，我们不能在.css文件中使用Razor代码。如果有人也知道css文件的解决方案，请添加到这里。很好，这对我很有用，因为我正在寻找一个内联（到cshtml）解决方案，所以如果你像Zia说的那样使用css inside Razor，我的代码看起来像
USA
完美的解决方案。这没有添加任何其他答案尚未说明的内容。
/* Assuming your Site.css is in the folder where "Images" folder is located */
/* Your Css Image url */

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