可以独立设置十六进制颜色不透明度吗?

Possible to set hex color opacity independently?

是否可以独立设置十六进制颜色的 opacity 值(以避免重复),或者附加到 var() 例如var(--set1)1?

示例:

:root {
  --set1: #abc;
  --set1-1: #abc1;
  --set1-3: #abc3;
  --set1-5: #abc5;
}


pre {
  border-left: 4px solid var(--set1);
  background-color: var(--set1-1);
}

在不久的将来,感谢 "relative color syntax" 您可以执行以下操作

:root {
  --set1: #abc;
  --set1-1: rgb(from var(--set1) r g b / 80%);
  --set1-3: rgb(from var(--set1) r g b / 50%);
  --set1-5: rgb(from var(--set1) r g b / 30%);
}

将颜色转换为 rgb() 值,然后设置透明度。


浏览器不支持以上内容。在那之前,您必须手动编写颜色或使用 Sass 生成它们。

相关: