更改 :root CSS RGB 变量的不透明度

Question

我的代码有很多 :root CSS 颜色变量，因此：

    --gray: rgb(142,142,147);
    --gray-2: rgb(174,174,178);
    --gray-3: rgb(199,199,204);
    --gray-4: rgb(209,209,214);
    --gray-5: rgb(229,229,234);
    --gray-6: rgb(242,242,247);

    --gray-c: rgb(142,142,147);
    --gray-c2: rgb(99,99,102);
    --gray-c3: rgb(72,72,74);
    --gray-c4: rgb(58,58,60);
    --gray-c5: rgb(44,44,46);
    --gray-c6: rgb(28,28,30);

我现在需要更改这些颜色的不透明度。当时我并没有考虑改变不透明度或操纵这些颜色。 该项目使用SCSS，所以我认为可以做类似background: rgba(var(--gray-5), 0.5)的事情，但可惜不是。处理此问题的最佳方法是什么？

Answer 1

我会尽力帮助你！这种格式应该适合你：

:root {
  --unvisited-color: #595144;
     --r: 174;
     --g: 147;
     --b: 118;

     --rgb: rgba(var(--r), var(--g), var(--b)/*, var(--o)*/);
  --th-color: var(--rgb); }

您可以像这样添加一些不透明度或滤镜：

opacity: 0.2;
filter: alpha(opacity=20

希望对你有帮助，就是一个例子。

Answer 2

可以不使用rgb只创建变量，使用,

分隔的值

:root {
--gray: 142,142,147;
}

body {
background: rgba(var(--gray), 0.5);
/*background: rgba(var(--gray), 0,5);*/
}

更改 :root CSS RGB 变量的不透明度

Change Opacity of :root CSS RGB Variables

css

sass

scss-mixins