TL; DR

Question

我已在w3Schools网站上下载了视差模板。我通过转到this并按Ctrl + S下载了模板。我无法在任何地方找到模板背景中的图像。我尝试修改代码以尝试放置另一个图像来代替原始视差图像，但它不起作用。我的编程知识非常有限。你能帮我弄清楚出了什么问题吗？

Answer 1

这是因为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上时，网址将转到以下位置：

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

但是因为它不再在该域上并且现在在您的文件系统上，它将转到：

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行，您将找到如下内容：

<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">

请注意，它可能略有不同，具体取决于您保存的浏览器（我在Chrome上）。

您不需要修改这些资产，它们实际上是在线托管的 - 只是您的浏览器试图变得聪明并为您下载它们。但是，这会产生大量问题 - 在这种情况下，您的图标字体将无法正确显示。

您需要将其替换为：

<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">

TL; DR

在主HTML文件中，将第28-44行替换为：

/* 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;
}

第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">

我们去！现在一切都应该有效了。

Answer 2

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

下载后HTML模板无法立即生效

2 个答案:

TL; DR