html - 为什么我的线性渐变只适用于一页？

Question

我将同一个 CSS 文件链接到三个不同的 HTML 文档。 CSS 看起来像这样:

body {
    font-family: sans-serif;
    margin: 0;
    background-color: rgba(255,0,0,.7);
    background-image: linear-gradient(180deg, rgba(255,0,0,1), rgba(255,255,255,1));
}

链接 CSS 文件的 HTML(在 head 标签中)看起来像:

<link rel = "stylesheet" type = "text/css" href = "css/style.css">

并且在三个文件之间复制粘贴。我的问题是线性渐变仅适用于我的起始页 (index.html)。在我的另外两个页面上，故障安全 background-color 显示。出现这个问题的原因是什么？

Answer 1

我测试这样做并提出了问题。您在页面上的高度可能不同。当我在页面上没有任何内容并执行此操作时，您看不到渐变，但当我将其更改为 100vh 时，它起作用了。

body {
  height: 100vh;
}

用不同的高度试试看，效果应该是一样的。