CSS背景圖像沒有加載，似乎沒有找到圖像

我正在做一個個人網站，我的CSS背景圖像似乎沒有工作。該網站的鏈接是http://distorts.me/new/它似乎沒有找到圖像，因爲它沒有加載，它只是一個白色區域。（對不正確的標點符號不太清楚）我正在使用chrome。CSS背景圖像沒有加載，似乎沒有找到圖像

的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>&copy " + 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>

來源

2016-02-27 Distorts

去除體內的標籤並沒有意識到它的背景是還有壽 – Distorts

不起作用您使用的是什麼瀏覽器？我可以在FireFox上看到bg完美無瑕。 – user1724434

作品在鉻太.. – Lal

當代碼正確時，最可能導致問題的問題是緩存。有些虛擬主機服務器具有高速緩存的預配置，並因爲你使用的是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");

來源

2016-02-27 23:32:22 Aziz

-1

試着改變你的背景鏈接背景SRC：

背景圖片：src（「http://distorts.me/new/includes/background.png「）;

來源

2016-02-27 19:10:21 cleverettgirl

不解決和即時通訊使用鉻即使刷新後也不加載緩存 – Distorts

這段代碼是錯誤的。在CSS背景中的圖像被引用使用'url（...）'而不是'src（...）' – Aziz

更改回url無法正常工作.. @aziz – Distorts

-1

在Chrome上正常工作。嘗試將您的背景網址更改爲：

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

並將該映像放置到該服務器而不是提供完整路徑。

來源

2016-02-27 19:14:33

不修復和即時使用鉻即使刷新後不加載緩存 – Distorts

您現在正在使用哪種版本的Chrome？ –

版本48.0.2564.116 m – Distorts

CSS背景圖像沒有加載，似乎沒有找到圖像

回答

相關問題