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

【问题标题】：CSS Background-Image refuses to display in ASP.Net MVCCSS Background-Image 拒绝在 ASP.Net MVC 中显示
【发布时间】：2012-03-22 12:05:22
【问题描述】：

在我的 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);

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

【问题讨论】：

你试过../Content/Images/designs.png
抱歉，手误。我的意思是.. 而不是~。
你没有任何模糊的“区分大小写的文件名”开关，对吗？
文件名全小写。相当积极
哦...你说名字是Designs.png，你试图用designs.png显示它。

标签： css asp.net-mvc-2

【解决方案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 元素，以准确查看应用了哪些样式和图像。

【讨论】：

好吧，点是，图像文件夹在内容文件夹中（css所在的位置），那是我尝试背景图像的时候：url（./Content/Images/designs.png）;背景图像：url（内容/图像/设计.png）；背景图片: url(Images/designs.png);
对，所以正确的语法是background-image: url(images/designs.png);。
@MrLister，是的，这行得通。如果没有，还有其他原因。不是因为他的网址不对。
@EonRustedduPlessis 等等，你是说你同时尝试了所有这些东西？
headache ... XD 我现在将身体的宽度和高度分别指定为 100%。我把我的行改成了你那里的行（图片文件夹大写，图片）

【解决方案2】：

这是我必须做的：

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

【讨论】：

这只有在 css 是内联的时候才有效。因为默认情况下我们不能在 .css 文件中使用 Razor 代码。如果有人也知道解决方案 foe css 文件，请在此处添加。
很好，这对我有用，因为我正在寻找内联（到 cshtml）解决方案，所以我的代码看起来像 <option style="padding: 5px 0 5px 40px; background: #FFFFFF url('@Url.Content("~/Content/flags/flag-usa2x.png")') no-repeat left center;">USA</option>
如 Zia 所说，如果您在 Razor 中使用 CSS，那么完美的解决方案。

【解决方案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);

【讨论】：

【解决方案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 以仍将资源包含在 bundle 中，请不要忘记。例如：

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 导入进行，则捆绑器在缩小时不会知道包含它。

希望这对某人有所帮助！

【讨论】：

【解决方案5】：

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

【讨论】：

不要这么认为，我和我的小伙伴都在做完全相同的应用程序，我们正在练习mvc。一切仍处于默认状态。现在我们从css开始，将Images文件夹添加到content文件夹，并将designs.png添加到images文件夹。我们将 site.master 中的链接更改为易于部署的符号并更改了正文标记：取出背景颜色并添加了背景图像： url(Images/设计.png)
所以这是一个全新的网页？正文中是否至少有一些内容？
我不赞成，因为这也是我遵循的 1 个步骤，不确定它是否修复了它。我必须修复的最接近的答案+从中学习的东西来自达林
好的。很高兴问题现在消失了！

【解决方案6】：

使用下面的代码

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

【讨论】：

这不会添加其他答案尚未说明的任何内容。

【解决方案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");

错误 url 的问题是 css 无法找到该图像，因为它不理解该 url 上使用的约定，因此不会显示图像。因此，为了简单起见，请使用主要的相对路径方法，您将永远不会遇到问题。

【讨论】：

【解决方案8】：

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

使用普通的 HTML/CSS

body{background-image: url("images/sparks.jpg");}
我的剃须刀文件夹结构

body{background-image: url("../../images/sparks.jpg");}

【讨论】：

【解决方案9】：

这对我有用

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

因为我的项目中直接有图像文件夹，所以我在网址中使用了

          /images/image.jpg

喜欢

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

【讨论】：

【解决方案10】：

我建议只拖放图像。 Visual Studio 会自动为你生成代码，

身体 { 背景图像： url('../../Content/Images/dark123.jpg'); }

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

希望这能解决您的问题。

干杯！

【讨论】：