在指定具有透明度的渐变颜色时,有没有办法使用CSS变量,例如
:root { --accent-color: #dfd0a5; } h1{ background: linear-gradient(to right,rgba(255,255,0),rgba(red(var(--accent-color)),green(var(--accent-color)),blue(var(--accent-color)),1)); }
解决方法
您可以使用变量,但不能从CSS中的单个十六进制值中采样单个红色,绿色和蓝色组件.
如果要将变量与rgba()一起使用,则需要为每个颜色分量指定一个变量作为十进制值,并引用rgba()函数中的每个变量,如下所示:
:root { --accent-red: 223; --accent-green: 208; --accent-blue: 165; } h1 { background: linear-gradient(to right,rgba(var(--accent-red),var(--accent-green),var(--accent-blue),1)); }
或者,您可以将整个rgba()值指定为单个变量,但在这种情况下您需要包含alpha:
:root { --accent-color: rgba(223,208,165,1); } h1 { background: linear-gradient(to right,var(--accent-color)); }
原文地址:https://www.jb51.cc/css/217375.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。