html - DIV 图像未显示

标签 html css

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

相关文章:

Javascript 返回仅适用于某些网站

php - DOM 解析器突出显示无效的关键字

html - 为什么这个 100% 宽度的图像大于屏幕宽度 * 设备像素比

javascript - 通过javascript更改整个文档的CSS值

javascript - 许多按钮的按钮单击动画

javascript - 从中心的 CSS 过渡 div 宽度

html - 元素之间难以理解的空间

html - 如何通过 CSS 为聚焦输入框上的标签着色?

html - 是否可以将 2x、3x 和 4x 等高 DPI 图像放入 SVG 图像模式中?

html - 是否有必要(或建议)向 HTML 元素添加 CSS 样式?