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 目录包含图像， 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;
 }

在这里阅读： How to give the background-image path in CSS?

我是CSS的新手。我的背景图片未加载。我正在使用外部CSS，我的操作系统是windows

2 个答案: