下载后HTML模板无法立即工作

我已经在网站上下载了视差模板。我通过转到并点击Ctrl+S下载了模板。我在模板背景的任何地方都找不到图像。我试图修改代码，尝试用另一幅图像代替原来的视差图像，但没有成功。我的编程知识非常有限。你能帮我找出问题所在吗？

这是因为CSS使用了一些相对URL：

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('/w3images/parallax1.jpg');
    min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("/w3images/parallax2.jpg");
    min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("/w3images/parallax3.jpg");
    min-height: 400px;
}

当它在w3schools.com上时，URL将转到如下位置：

https://w3schools.com/w3images/parallax1.jpg

<link rel="stylesheet" href="./W3.CSS Template_files/w3.css">
<link rel="stylesheet" href="./W3.CSS Template_files/css(1)">
<link rel="stylesheet" href="./W3.CSS Template_files/font-awesome.min.css">

但由于它不再位于该域中，并且现在位于您的文件系统中，因此它将转到：

file:///w3images/parallax1.jpg

要解决此问题，只需将代码更改为以下内容：

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('https://w3schools.com/w3images/parallax1.jpg');
    min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("https://w3schools.com/w3images/parallax2.jpg");
    min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("https://w3schools.com/w3images/parallax3.jpg");
    min-height: 400px;
}

您可以在主HTML文件的第28-44行中找到这一点

---

这不是问题的一部分，但您还需要修复图标字体。在主HTML文件的第9-11行，您会发现如下内容：

https://w3schools.com/w3images/parallax1.jpg

<link rel="stylesheet" href="./W3.CSS Template_files/w3.css">
<link rel="stylesheet" href="./W3.CSS Template_files/css(1)">
<link rel="stylesheet" href="./W3.CSS Template_files/font-awesome.min.css">

以及第9-11行，其中包含：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

---

---

好了！现在一切都正常了。

如果您要使用Mozilla firefox，请按右键单击并单击“查看页面信息”，然后按第二个选项卡“媒体”，您可以下载所有具有完整路径的背景图像。

图像可能在CSS中被视为背景。你应该检查你的样式表。