在媒体查询中使用背景图像时不加载答案

【问题标题】：Background images not loading when used in media queries在媒体查询中使用背景图像时不加载
【发布时间】：2016-02-09 00:49:41
【问题描述】：

我有一个用于项目的非常标准的 MVC 模板。在我的项目中，我试图根据我的屏幕宽度显示不同的背景图像。问题是，如果我将 CSS 包装在媒体查询中，然后将内容推送到开发服务器，我的背景图像不会加载。不过，我在 localhost 中没有这个问题。我在我的项目中使用 Bootstrap，但是这个特定的 CSS 是写在一个单独的文件中的。此外，这个项目位于我服务器上的另一个项目中。

/Root Project
 --My Project

CSS：

html {
background: url(/Images/img1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}

@media (max-width: 768px) {
html {
    background: url(/Images/img2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    }
    .center-margin {
    margin-top: 30%;
    }
    .header-text {
    color: black;
    }
}

我的 HTML 中的标头具有以下元数据标签：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>

在我将媒体查询从 CSS 中的第一个 html 块中取出后，它再次开始显示。包含在媒体查询中的第二个块不会显示。媒体查询中的其他 CSS 显示，所以它只是给我问题的背景图像。

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

您的代码正在运行。您应该确保将图像资源上传到服务器的正确目录中。此外，通常在加载 URL 时，您需要将它们放在引号中。

html {
  background: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}

@media (max-width: 768px) {
  htm

l {
    background: url("http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
  }
  .center-margin {
    margin-top: 30%;
  }
  .header-text {
    color: black;
  }
}

这里是Codepen 使用在线托管图像的工作。

【讨论】：

我到我的服务器上验证图像确实存在并且它们确实存在。我还在我的网址周围加上引号，将更改推送到服务器，结果仍然相同。
您确定图像与源 URL 的相对位置与您在本地主机上的位置相同吗？你的代码不是问题，如果有任何东西可以使用文件路径来确保它从正确的目录中检索文件。