CSS :root 中的背景图像渐变
CSS background-image gradient in :root
我有一个代码显然不起作用。它是 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%);
}
为什么不起作用?
这是演示的 link:https://codepen.io/MAJO-SEARCH/project/editor/XEWoVE
您使用的是一种非常古老的语法,不再需要并且不适用于 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%);
我有一个代码显然不起作用。它是 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%);
}
为什么不起作用?
这是演示的 link:https://codepen.io/MAJO-SEARCH/project/editor/XEWoVE
您使用的是一种非常古老的语法,不再需要并且不适用于 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%);