我有一个显然不起作用的代码。它是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