Question

我有一个非常标准的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显示，因此它只是给我提出问题的背景图像。

Answer 1

您的代码正常运行。您应确保将图像资源上载到服务器的正确目录中。此外，通常用于加载您希望将它们放在引号中的网址。

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此处使用在线托管的图片。

媒体查询中使用的背景图片未加载

1 个答案: