例如将某个颜色转换成透明度为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);