我想从我的 index.html 中调用一个 css，css 在 CSS 文件夹中，图像文件夹中还有一个图像..
我尝试了不同的方法，但都不成功
目录是这样的
My_First_Website
Javascript Resources
WebContent
css
mystyles.css
images
mybackgroundImage.png
index.html
现在 mystyles.css 看起来像这样
@CHARSET "ISO-8859-1";
body
{
background-image:url('/WebContent/images/mybackgroundimage.png');
}
我的 HTML 页面看起来是这样的
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="/WebContent/css/mystyles.css" media="screen" />
<title>My Website</title>
</head>
<body>
</body>
</html>
现在页面显示为空 :(。请帮忙 :)
最佳答案
在您的背景图片和样式表引用中，您使用的是绝对路径(以正斜杠开头的路径)。在网站上，绝对路径指示浏览器去寻找根目录下的资源。
让我们假设我有一个具有以下结构的网站:
index.html
css/
screen.css
images/
main-back.png
project/
sample.html
我将以下 HTML 添加到 project/sample.html:
<img src="/images/main-back.png" />
要查找图片，浏览器会先到根目录，然后查找images目录，再查找main-back.png。或者，您可以使用相对路径:
<img src="images/main-back.png" />
如果没有正斜杠，浏览器将在元素目录(sample.html 所在的位置)中启动并查找 images 文件夹是徒劳的。这将导致不显示图像。为了修复它，我们告诉浏览器首先向上导航一个目录:
<img src="../images/main-back.png" />
这与我们的第一个示例基本相同，只是我们使用的是相对路径而不是绝对路径。
现在，您面临的问题是您要在自己的计算机上打开该页面。在这种情况下，没有根 Web 目录，因此您需要使用相对路径而不是绝对路径。因此，对于您的样式表引用，您可以使用:
<link rel="stylesheet" type="text/css" href="css/mystyles.css" media="screen" />
从index.html开始，在同一目录下寻找css目录，然后在该目录下找到mystyles.css。
对于 CSS 图像引用，要记住的关键是 CSS 文件中的路径是相对于 CSS 文件本身的。因此，您需要以下内容:
background-image:url('../images/mybackgroundimage.png');
从 mystyles.css 开始，向上移动一个目录，查找 images 目录，然后在该目录中找到 mybackgroundimage.png。
关于html - 在eclipse中创建html页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7298061/