:root中的CSS背景图像渐变

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

: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;
--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;
  --color-1f1: #ccc;
  --color-white-button: #000;
--color-b8b: #d4d4d4;
--color-f21: #f52a2c;
--pre-bg-rgb: 0,0;
--scrollbar-hover: #363636;
--scrollbar-active: #454545;
--fade-rgb: 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),1) 100%);
  background-image: -o-linear-gradient(rgba(var(--primary-rgb),1) 100%);
  background-image: linear-gradient(rgba(var(--primary-rgb),1) 100%);
  background-image: -ms-linear-gradient(rgba(var(--primary-rgb),1) 100%);
}

为什么不起作用?

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

shanzei05215 回答::root中的CSS背景图像渐变

您使用的是非常老的语法,不再需要,并且不适用于CSS变量。

只需执行以下操作即可。现在,到处都支持Gradient,并且不需要供应商前缀。

  :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;
  --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;
  --color-1f1: #ccc;
  --color-white-button: #000;
  --color-b8b: #d4d4d4;
  --color-f21: #f52a2c;
  --pre-bg-rgb: 0,0;
  --scrollbar-hover: #363636;
  --scrollbar-active: #454545;
  --fade-rgb: 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%);

本文链接:https://www.f2er.com/2954329.html

大家都在问