CSS背景图像未加载，似乎找不到图像 - CSS background-image not loading, doesn't seem to find image

我正在制作一个个人网站，但我的CSS背景图像似乎不起作用。链接到该网站 http://distorts.me/new/似乎找不到图像，因为它没有加载，它只是一个白色区域。（抱歉标点符号不正确不是很识字）我正在使用铬。

风格.css

    body {
    background-image: url("http://distorts.me/new/includes/background.png");
    color: #C0C0C0;
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
}
.row.content {height: 450px}
.sidenav {
  padding-top: 20px;
  background-color: #808080;
  height: 100%;
  font-size: 20px;
}
a {
  color: #C0C0C0;
  text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #404040;
}
footer {
  background-color: #555;
  color: white;
  padding: 15px;
}
@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {height:auto;} 
}

索引.php

    <html lang="en">
<!-- George M. -->
<!-- 2/26/16 -->
<?php
include 'includes/head.php';
?>
<body oncontextmenu="return false" background="includes/background.png">
<header class="container-fluid text-center" style="background-color: #404040;">
    <h1>George M. - Welcome</h1>
</header>
<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav" style="height: 183%">
      <p><a href="index-2.html">Home</a></p>
      <p><a href="/about">About Me</a></p>
      <p><a href="/services">Services</a></p>
      <p><a href="/contact">Contact</a></p>
    </div>
    <div class="col-sm-8 text-middle">
      <h1>Welcome</h1>
      <p>test</p>
      <hr> 
      <h3>Test</h3>
      <p>test</p>
    </div>
  </div>
</div>
<footer id="foot" class="container-fluid text-center">
</footer>
<script type="text/javascript">
    document.getElementById('foot').innerHTML = 
    "<p>&copy " + new Date().getFullYear() + " Distorts | George M. All rights reserved. <span style='color: #808070;'>Made by George M.</span>"
</script>
</body>
</html>

头.php

<head> 
    <title>George M | Home</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="author" content="Distorts">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
</head>

当代码正确时，最有可能导致问题的问题是缓存。一些虚拟主机服务器具有缓存预配置，由于您使用的是PHP，因此您可以简单地发送阻止缓存的PHP标头 - 在header.php的最顶部添加以下行：

<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>

另一个可以使用的技巧是timestamping/querystring - 这种方法基本上强制浏览器重新加载文件，因为它的 URL 与之前加载的 URL 不同。因此，自然而然地，我们添加了时间变量（因为时间总是在变化）。其他开发人员通过添加版本查询来使用此方法，但这需要更多的维护。

使用 PHP 添加文件时间戳：

<link rel="stylesheet" type="text/css" href="style.css?t=<?php echo date('YmdHis');">

输出

<link rel="stylesheet" type="text/css" href="style.css?t=20160227182425">

文件版本示例

<link rel="stylesheet" type="text/css" href="style.css?v=2.1">

另外，请记住，CSS 背景路径是相对于 CSS 文件本身的，而不是 HTML 文档。html 中的链接相对于 html 文档，CSS 中的链接相对于 CSS 文件。因此，引用图像的正确方法是：

background-image: url("includes/background.png");

尝试将后台网址更改为后台 src ：

背景图像：SRC （"http://distorts.me/new/includes/background.png"）;

在 Chrome 上运行良好。尝试将后台网址更改为：

background-image: src("/includes/background.png");

并将该图像放置到该服务器，而不是提供完整路径。