CSS背景圖片未加載，似乎找不到圖片
[英]CSS background-image not loading, doesn't seem to find image
問題描述
我正在建立一個個人網站，但是我的CSS背景圖片似乎無法正常工作。 該站點的鏈接是http://distorts.me/new/ ，因為它沒有加載，所以似乎找不到圖像，它只是一個白色區域。 （抱歉，標點符號不正確，我不太識字）我正在使用chrome。
style.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;}
}
index.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>© " + new Date().getFullYear() + " Distorts | George M. All rights reserved. <span style='color: #808070;'>Made by George M.</span>"
</script>
</body>
</html>
head.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>
3 個解決方案
解決方案1
0 已采納 2016-02-27 23:32:22
如果代碼正確，則最有可能引起問題的問題是緩存。 某些Web托管服務器具有緩存預配置，並且由於您使用的是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");
解決方案2
-1 2016-02-27 19:10:21
嘗試將背景網址更改為background src：
background-image：src（“ http://distorts.me/new/includes/background.png ”）;
解決方案3
-1 2016-02-27 19:14:33
在Chrome上正常工作。 嘗試將背景網址更改為：
background-image: src("/includes/background.png");
並將該映像放置到該服務器，而不是提供完整路徑。
Cakephp：載入背景圖片CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.