Фон с линейным градиентом меняет цвет в зависимости от конкретной страницы

Question

Я создаю веб-сайт и хочу, чтобы каждая страница стала чёрной с разного цвета на каждой странице.Я знаю, что могу сделать отдельный div для каждой страницы на сайте и включить его в качестве фона.Есть ли способ сделать это непосредственно в теге body?без деления для каждой страницы?

Чтобы уточнить: если я на главной странице, я хочу, чтобы она исчезла с черного на светло-синий.Если я нахожусь на странице истории, я хочу, чтобы она поменяла цвет с черного на желтый.

Это тег body в моем файле CSS:

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);
}