起初，问题似乎是只有链接到我的 HTML 文档中的 CSS 文件在打开时没有在浏览器中加载，但是当将图像集成到 HTML 文档中时，我发现它也没有加载打开文档时没有出现在浏览器中(我使用 Microsoft Edge、Chrome 和 Firefox 打开文档。所有文件都位于我计算机上的同一文件夹中，但使用相对路径定位文件似乎也什么都不做。代码看起来是这样的。(值得注意的是，我同时使用 CSS 中的背景图像属性和 HTML 中的标记来加载相同的文件，因为它们似乎都不起作用)
HTML 代码:
<head>
<title>Quad Game Schedule</title>
<link type="stylesheet" rel="text/css" href="displaylayout.css">
</head>
<body>
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
<div class="F1">
<h2>Full Field Games</h2>
<ul>
<li>12:00 - TSPro vs Wings</li>
<li>12:45 - Team Evanston vs Bosnia</li>
</ul>
</div>
CSS 代码 (displaylayout.css):
body {
background-color: rgb(242, 242, 242);
color: red;
}
p {
color: red;
}
img {
align-self: center;
vertical-align: top;
}
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
.F1 {
align-self: center;
float: left;
clear: none;
width: auto;
}
在浏览器开发人员侧边栏中，它说网页没有样式属性，这不可能是真的。我总是可以将 CSS 写入 HTML 文档，但图像也是最终产品的组成部分，也不会加载。 (同样值得注意的是，CSS 中使用的 p 元素和主体的文本颜色仅用于测试目的)
编辑:这是我制作的测试文件的确切代码，但仍然无法正常工作。
HTML:
<html>
<head>
<title>Test Webpage</title>
<link type="stylesheet" rel="text/css" href="test.css">
</head>
<body>
<h1>This is a test heading</h1>
<p>This is a test paragraph</p>
<img src="test.png" alt="Test Picture">
</body>
</html>
CSS:
h1 {
color: red;
font-size: 24pt;
}
p {
color: blue;
font-size: 12pt;
}
这些测试文件的新文件夹中的图像已重命名为 test.png。
编辑 2:我刚刚发现我的链接到外部文件的旧文件仍然有效，所以问题出在我制作的新文件上。
最佳答案
在您的代码中，您尝试加载图像两次，一次作为 div 类 fieldimg 的背景图像，一次在 ` 标签中:
<div class="fieldimg">
<img src="field.png" alt="Field Overhead Image">
</div>
.fieldimg {
height: 30%;
width: 45%;
background-image: image(field.png);
background-size: cover;
}
1.) 背景图像需要像 background-image: url(field.png) 这样定义，而不是像你那样定义 ("image(field.png)")
2.) .fieldimg 的 height 设置 (30%) 将不起作用，因为它周围没有具有高度设置的容器30% 可能有关联。所以这变为 0px 高，因此将不可见。为避免这种情况，您可以将 height: 100% 应用于 body
如果同时修复这两个问题，则必须删除背景图片或图片标签，否则您将获得两次图片...
关于html - 没有链接到 HTML 文档的外部文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42939202/