如何将不透明度应用于CSS颜色变量? |
您所在的位置:网站首页 › rgb颜色透明度 › 如何将不透明度应用于CSS颜色变量? |
我知道OP没有使用预处理器,但如果以下信息是这里答案的一部分,我会得到帮助(我还不能评论,否则我会评论@BoltClock answer。 如果您使用的是scss,则上面的答案将失败,因为scss尝试使用特定于scss的rgba()/hsla()函数编译样式,该函数需要4个参数。但是,rgba()/hsla()也是原生css函数,因此可以使用字符串插值来绕过scss函数。 示例(在sass 3.5.0+中有效): :root { --color_rgb: 250, 250, 250; --color_hsl: 250, 50%, 50%; } div { /* This is valid CSS, but will fail in a scss compilation */ background-color: rgba(var(--color_rgb), 0.5); /* This is valid scss, and will generate the CSS above */ background-color: #{'rgba(var(--color_rgb), 0.5)'}; } 请注意,字符串插值将不适用于非CSS scss函数,例如lighten(),因为生成的代码将不是函数式CSS。但是,它仍然是有效的scss,因此在编译过程中不会收到任何错误。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |