如何将不透明度应用于 CSS 颜色变量?
P粉495955986
P粉495955986 2023-08-24 00:12:47
0
1
432

我正在使用 Electron 设计一个应用程序,因此我可以访问 CSS 变量。我在 vars.css 中定义了一个颜色变量:

:root { --color: #f0f0f0; } 

我想在 main.css 中使用这种颜色,但应用了一些不透明度:

#element { background: (somehow use var(--color) at some opacity); } 

我该如何去做呢?我没有使用任何预处理器,只使用CSS。我更喜欢全 CSS 答案,但我会接受 JavaScript/jQuery。

我无法使用不透明度,因为我使用的背景图像不应该是透明的。

P粉495955986
P粉495955986

全部回复 (1)
P粉715274052

您不能采用现有颜色值并对其应用 Alpha 通道。也就是说,您不能采用现有的十六进制值(例如#f0f0f0),为其提供 alpha 分量并将结果值与另一个属性一起使用。

但是,自定义属性允许您将十六进制值转换为 RGB 三元组以与rgba()一起使用,将该值存储在自定义属性中(包括逗号!),使用将var()转换为具有所需 alpha 值的rgba()函数,它就会正常工作:

:root { /* #f0f0f0 in decimal RGB */ --color: 240, 240, 240; } body { color: #000; background-color: #000; } #element { background-color: rgba(var(--color), 0.8); }

If you can see this, your browser supports custom properties.

    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!