Question

起初，问题似乎是只有我的CSS文件（链接到我的HTML文档）在打开时没有在浏览器中加载，但是当将图像集成到HTML文档中时我发现它打开文档时，浏览器中也没有出现（我使用Microsoft Edge，Chrome和Firefox打开文档。所有文件都位于我的计算机上的同一文件夹中，但使用相对路径来定位这些文件似乎也什么也没做。代码看起来就像这样。（值得注意的是，我正在搞乱CSS中的background-image属性和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：我刚发现我的旧文件链接到外部文件仍然有用，所以问题在于我制作的新文件。

Answer 1

在您的代码中，您尝试将图像加载两次，一次作为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。）height的{{1}}设置（30％）不起作用，因为它周围没有容器，其高度设置与30％可能相关。因此，这将变为0px高，因此将不可见。为避免这种情况，您可以将.fieldimg应用于height: 100%

如果您同时修复两者，则必须删除背景图像或图像标记，否则您将获得两次图像...

Answer 2

您的CSS包含可能是错误原因的错误：

.fieldimg {
  height: 300px; /* set an absolute amount of pixels here instead of a relative number (which is relative to nothing) */
  width: 45%;
  background-image: url('field.png'); /* this is how you place images by setting a background image */
  background-size: cover;
}

Reference

另外，请记住，在CSS中不使用相对路径时，它与.css文件的位置有关！因此，如果将图像用作特定CSS文件夹中的背景图像，请确保图像相对于该CSS文件位置。

外部文件未链接到HTML文档

2 个答案: