:root 中的 CSS 背景图像渐变

Question

我有一个代码显然不起作用。它是 body 元素之后的渐变。在我决定将颜色移动到 :root 之前，渐变一直在工作。这是有问题的代码:

:root {
--primary: #222;
--primary-rgb: 31, 31, 31;
--color-888: #888;
--color-888-rgb: 136, 136, 136;
--color-1f1: #1f1f1f;
--color-white-button: #fff;
--color-b8b: #b8b8b8;
--color-f21: #F23D3F;
--pre-bg-rgb: 31, 31, 31;
--scrollbar-hover: #4a4a4a;
--scrollbar-active: #383838;
--fade-rgb: 34, 34, 34;
}

[data-theme="dark"] {
    --primary: #fff;
  --primary-rgb: 255, 255, 255;
  --color-888: #000;
--color-888-rgb: 0, 0, 0;
  --color-1f1: #ccc;
  --color-white-button: #000;
--color-b8b: #d4d4d4;
--color-f21: #f52a2c;
--pre-bg-rgb: 0, 0, 0;
--scrollbar-hover: #363636;
--scrollbar-active: #454545;
--fade-rgb: 255, 255, 255;
}

body::after {
  content: '';
  position: fixed;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  height: 30px;
  background: -webkit-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
  background-image: -moz-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
  background-image: -o-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
  background-image: linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
  background-image: -ms-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
}

为什么它不起作用？

这是演示的链接:https://codepen.io/MAJO-SEARCH/project/editor/XEWoVE

Answer 1

您正在使用一种不再需要且不适用于 CSS 变量的非常古老的语法。

只需像下面那样做。现在到处都支持渐变，不需要供应商前缀。

  :root {
  --primary: #222;
  --primary-rgb: 31, 31, 31;
  --color-888: #888;
  --color-888-rgb: 136, 136, 136;
  --color-1f1: #1f1f1f;
  --color-white-button: #fff;
  --color-b8b: #b8b8b8;
  --color-f21: #F23D3F;
  --pre-bg-rgb: 31, 31, 31;
  --scrollbar-hover: #4a4a4a;
  --scrollbar-active: #383838;
  --fade-rgb: 34, 34, 34;
}

[data-theme="dark"] {
  --primary: #fff;
  --primary-rgb: 255, 255, 255;
  --color-888: #000;
  --color-888-rgb: 0, 0, 0;
  --color-1f1: #ccc;
  --color-white-button: #000;
  --color-b8b: #d4d4d4;
  --color-f21: #f52a2c;
  --pre-bg-rgb: 0, 0, 0;
  --scrollbar-hover: #363636;
  --scrollbar-active: #454545;
  --fade-rgb: 255, 255, 255;
}

body::after {
  content: '';
  position: fixed;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  height: 30px;
  background: linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);