Skip to content

0x024-Css颜色的透明度转换相对值语法和color-mix

例如将某个颜色转换成透明度为20%:

css
border-left-color: var(--color-tip);
background-color: rgb(from var(--color-tip) r g b / 20%);
border-left-color: var(--color-tip);
background-color: rgb(from var(--color-tip) r g b / 20%);

相对值语法

相对值语法:

css
rgb(from <color> R G B[ / A])
rgb(from <color> R G B[ / A])
background-color: rgb(11 11 11);
background-color: rgb(11 11 11 / 50%);
background-color: rgb(from green r g b / 0.7);
background-color: rgb(from green r calc(g - 40) b);
background-color: rgb(0 88 0); (green=rbg(0 128 0))

color-mix

Warning

注意支持的版本 Chrome 111+, Safari 16.2, or Firefox 113

基础用法:

color-mix(method, color1[ p1], color2[ p2])
color-mix(method, color1[ p1], color2[ p2])
  • color1 第一个颜色的
  • color2 第二个颜色的
  • p1、p2 可选,混合比例
color-mix(in srgb, red, yellow);
color-mix(in srgb, red 50%, yellow);
color-mix(in srgb, red 20%, yellow);

使用color-mix 与透明混合也可以实现改变透明度的效果。

color-mix(in srgb, black, transparent);