Question

我有一个链接到三个不同HTML文档的相同CSS文件。 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 ）。在我的另外两页上，显示了故障安全的背景色。这个问题的原因是什么？

Answer 1

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

body {
  height: 100vh;
}

以不同的高度尝试它，并且应该工作相同。

Answer 2

按照我的观察方式，有两种方法，一种是直接在<style>标签内的HTML文件中添加CSS，然后在所有需要的页面上使用CSS。

第二种方法是在单独的文件中添加一个类：

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

为什么线性渐变仅适用于一页？

2 个答案: