线性渐变背景根据特定页面改变颜色

Question

我正在建立一个网站，我希望每个页面从黑色逐渐淡化为每个页面的不同颜色。我知道我可以为网站中的每个页面单独做一个div，并将其作为背景。有没有办法直接在body标签中执行此操作？没有为每个页面做一个div？

要澄清一下：如果我在主页中，我希望它从黑色逐渐变为浅蓝色。如果我在历史记录页面中，则希望它从黑色逐渐淡化为黄色。

这是我的CSS文件中的body标签：

body{
  background: linear-gradient(to top, #5DBCD2, 15%, black);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "PT Serif", serif;
  }

非常感谢您的帮助！

Answer 1

是

给每个页面body一个类，然后使用CSS自定义属性为每个类设置颜色。

您的CSS类似于

:root {
--color-start: green;
}

body{ /* this is the default */
  background: linear-gradient(to top, var(--color-start), 15%, black);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "PT Serif", serif;
  }

.home {
--color-start: red
}

.history {
--color-start:blue
}

Answer 2

将class添加到body每个页面，例如home，history

body{
    font-family: "PT Serif", serif;
    background-repeat: no-repeat;
    background-size: cover;
}
body.home{
   background: linear-gradient(to top, #5DBCD2, 15%, black);
}
body.history{
  background: linear-gradient(to top, #5DBCD2, 15%, black);
}