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;
}

Answer 1

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

所以试试这个：

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

CSS文件中的

../表示返回一个目录，然后它将转到您的根文件夹，然后它将查找images文件夹，然后找到final2.gif然后您的将显示图像。它适用于您的HTML，因为您的HTML文件已经在根文件夹中，所以它不需要返回一个目录，它只是直接找到images文件夹。

正如 @Lee Meador 所说：

因此，HTML中的URL与HTML文件的路径相关，CSS文件中的URL相对于CSS文件的路径。

这是绝对正确的。

Answer 2

问题是因为您使用的是相对URL，因此该路径与其所包含的文件相关。

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

这应该有效：

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

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

DIV图像未显示

HTML

CSS

2 个答案: