0

我认为背景图像的路径是正确的，因为相同的路径在 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;
}
4

2 回答 2

5

用于"../"返回一个目录并选择文件，因为您的 CSS 文件是另一个文件夹。

所以试试这个：

background-image:url('../images/final2.gif');

../在您的 CSS 文件中意味着返回一个目录，然后它将转到您的根文件夹，然后它会查找该images文件夹，然后找到final2.gif然后您的图像将被显示。它可以在您的 HTML 中使用，因为您的 HTML 文件已经在根文件夹中，所以它不需要返回一个目录，它只是直接找到该images文件夹​​。

正如@Lee Meador所说：

所以 HTML 中的 URL 是相对于 HTML 文件的路径，而 CSS 文件中的 URL 是相对于 CSS 文件的路径。

这是完全正确的。

于 2013-10-11T16:03:42.077 回答
0

问题是因为您使用的是相对 URL，因此路径是相对于其中包含的文件的。

在第一个示例中，路径是相对于 HTML 文件的，因此它可以找到图像文件夹。但是，在您的第二个示例中，路径是相对于您的 CSS 文件的，并且因为它位于子文件夹 (css) 中，所以它无法找到 images 文件夹。

这应该有效：

background-image:url('../images/final2.gif');

使用../指定父文件夹。这是您的 html 文件所在的位置，更重要的是，“图像”文件夹所在的位置。

于 2013-10-11T16:03:48.690 回答