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

时间:2019-07-17 17:28:10

标签: css sass scss-mixins

我的代码具有许多: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)的事情,但是事实并非如此。最好的方式是什么?

2 个答案:

答案 0 :(得分:1)

您只能使用,

分隔的值来创建变量而不使用rgb

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

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

答案 1 :(得分:0)

我会尽力帮助您! 这种格式应该适合您:

# A tibble: 3 x 3
  `G4 grade` `G6 grade` `G8 grade`
       <dbl>      <dbl>      <dbl>
1          1          1          1
2          2          2          2
3          3          3          3

您可以添加一些不透明度或过滤器,如下所示:

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

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

希望它对您有所帮助。