在 css 变量中设置 rgba 的不透明度/alpha
Setting opacity / alpha on rgba in css variable
我正在尝试 CSS 个变量,我想使用 RGB 颜色。
这是我当前的 CSS 变量:
--primary: rgb(112, 199, 255);
因此,当使用以下代码时,这绝对可以正常工作:
color: var(--primary)
但有些段落也使用这种原色,我想给它们一点透明度。现在我可以替换它并创建另一个 CSS 变量,如下所示:
--primary: rgb(112, 199, 255);
--primary-alpha: rgba(112, 199, 255, 0.7);
但是,如果我使用几种不同的透明胶片,那么使用两种原色会让人感到混乱和困惑。我还可以使用以下 CSS 变量:
--primary: 112, 199, 255;
--alpha: 0.7;
并使用以下代码输出:
color: rgba(var(--white), var(--alpha));
这是我想要的效果,我个人认为这是一种更好的方法,但我的颜色无法在我的代码编辑器中预览,请参见图片。
查看 --dark 变量,使用此代码不会显示颜色。
理想情况下,我想使用:
--primary: rgb(112, 199, 255);
然后像这样输出:
color: var(--white), var(--alpha);
但是不行吗?
假设您使用的是 atom-pigment。颜色检测也适用于评论。因此,您或许可以在注释中添加实际的 rgb 值,仅供参考并照常使用该变量。像这样:
--dark: 18, 38, 51 /* this color is - rgb(18, 38, 51) */
我正在尝试 CSS 个变量,我想使用 RGB 颜色。
这是我当前的 CSS 变量:
--primary: rgb(112, 199, 255);
因此,当使用以下代码时,这绝对可以正常工作:
color: var(--primary)
但有些段落也使用这种原色,我想给它们一点透明度。现在我可以替换它并创建另一个 CSS 变量,如下所示:
--primary: rgb(112, 199, 255);
--primary-alpha: rgba(112, 199, 255, 0.7);
但是,如果我使用几种不同的透明胶片,那么使用两种原色会让人感到混乱和困惑。我还可以使用以下 CSS 变量:
--primary: 112, 199, 255;
--alpha: 0.7;
并使用以下代码输出:
color: rgba(var(--white), var(--alpha));
这是我想要的效果,我个人认为这是一种更好的方法,但我的颜色无法在我的代码编辑器中预览,请参见图片。
查看 --dark 变量,使用此代码不会显示颜色。
理想情况下,我想使用:
--primary: rgb(112, 199, 255);
然后像这样输出:
color: var(--white), var(--alpha);
但是不行吗?
假设您使用的是 atom-pigment。颜色检测也适用于评论。因此,您或许可以在注释中添加实际的 rgb 值,仅供参考并照常使用该变量。像这样:
--dark: 18, 38, 51 /* this color is - rgb(18, 38, 51) */