我是CSS新手。我的背景圖片未加載。我正在使用外部CSS，我的操作系統是Windows

Question

以下是我的CSS和HTML文件。

 .backgroundimage{ backgroud:url('C:\\Users\\shvikram\\Desktop\\Social_Media\\Images\\login_page.jpg'); background-attachment:fixed; }

  <html> <head><link rel="icon" href="Images\\Logo.ico" type="image/x-icon" /></head> <link rel="stylesheet" type="text/css" href="CSS\\main.css"> <title>Social Media</title> <body> <div class="backgroundimage">Hello World</div> </body> </html>

目錄結構如下。

Social_Media目錄包含Images ， CSS和index.html文件。

我也嘗試使用以下表示法，但不起作用。

.backgroundimage {
   background-image: url('\Images\login_page.jpg');
   background-repeat: no-repeat;
 }

Answer 1

首先，您的樣式表鏈接和標題不帶有head標簽。

其次，樣式表中的鏈接是相對於CSS文件（ 而不是包含樣式表的文件）而言的，因此應為：

.backgroundimage{
    backgroud: url('../Images/login_page.jpg'); /* In parent folder, Images */
    background-attachment: fixed;
}

第三，無論您使用的是Windows操作系統，都不要對文件路徑使用反斜杠。

第四，繼續並使用瀏覽器檢查器，以確保所有資源都已加載，而不是跟蹤錯誤等。

最終的HTML應該如下所示：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" /> 
        <link rel="icon" type="image/x-icon" href="Images/Logo.ico" />
        <link rel="stylesheet" type="text/css" href="CSS/main.css" />
        <title>Social Media</title>
    </head>
    <body>      
        <div class="backgroundimage">Hello World</div>              
    </body>
</html>

Answer 2

這只是圖像路徑的問題。 它應該相對於您的HTML文件：

<head><link rel="icon" href="Images\Logo.ico" type="image/x-icon" /></head>
  <link rel="stylesheet" type="text/css" href="CSS\main.css">
    <title>Social Media</title> 
<body>      
        <div class="backgroundimage">Hello World</div>              
</body>

CSS：

.backgroundimage {
   background-image: url('http://via.placeholder.com/350x150');
   background-repeat: no-repeat;
   height: 300px;
 }

在此處閱讀有關內容：如何在CSS中提供背景圖像路徑？

我是CSS新手。我的背景圖片未加載。我正在使用外部CSS，我的操作系統是Windows

問題描述

2 個解決方案

解決方案1
1 2017-06-11 10:17:55

解決方案2
1 已采納 2017-06-11 10:18:31

我是CSS新手。 我的背景圖片未加載。 我正在使用外部CSS，我的操作系統是Windows

問題描述

2 個解決方案

解決方案1 1 2017-06-11 10:17:55

解決方案2 1 已采納 2017-06-11 10:18:31

我是CSS新手。我的背景圖片未加載。我正在使用外部CSS，我的操作系統是Windows

解決方案1
1 2017-06-11 10:17:55

解決方案2
1 已采納 2017-06-11 10:18:31