我认为背景图像的路径是正确的,因为相同的路径在 HTML 中有效,但我可能是错的。基本上,图像不显示。有谁知道为什么吗?
HTML
<head>
<title>2013 YourFantasyFootball</title>
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
</head>
<body>
<div class="container">
<!--<img src="images/final2.gif" class="stretch" alt="" />-->
<p>This is the first paragraph in the body of your new HTML file!</p>
</div>
</body>
</html>
CSS
body {
/*width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px; */
/*z-index: -1;*/ /* Ensure div tag stays behind content; -999 might work, too. */
background-color:black;
}
.container {
background-image:url('images/final2.gif');
width:900px;
height:2000px;
margin-left:auto;
margin-right:auto;
}
最佳答案
使用 "../"
返回一个目录并选择文件,因为您的 CSS 文件是另一个文件夹。
那么试试这个:
background-image:url('../images/final2.gif');
../
在您的 CSS 文件中意味着返回一个目录,然后它将转到您的根文件夹,然后它将查找 images
文件夹,然后找到final2.gif
然后你的图片就会显示出来。它在你的 HTML 中工作,因为你的 HTML 文件已经在根文件夹中,所以它不需要返回一个目录,它只是直接找到 images
文件夹。
正如@Lee Meador 所说:
So the URL in HTML is relative to the path of the HTML file and the URL in the CSS file is relative to the path of the CSS file.
完全正确。
关于html - DIV 图像未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19322487/