CSS color-mix() 函数
- 上一页 CSS color() 函数
- 下一页 CSS conic-gradient() 函数
- 返回上一层 CSS 函数参考手册
定义和用法
CSS 的 color-mix()
函数用于在给定的颜色空间中按指定比例混合两种颜色值。
实例
例子 1
在 hsl 颜色空间中按指定比例混合两种颜色值:
div { padding: 15px; border: 2px solid black; background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%); }
例子 2
在 oklab 颜色空间中按不同比例混合两种颜色值:
li:nth-child(1) { background-color: color-mix(in oklab, #6a5acd 0%, pink); } li:nth-child(2) { background-color: color-mix(in oklab, #6a5acd 25%, pink); } li:nth-child(3) { background-color: color-mix(in oklab, #6a5acd 50%, pink); } li:nth-child(4) { background-color: color-mix(in oklab, #6a5acd 75%, pink); } li:nth-child(5) { background-color: color-mix(in oklab, #6a5acd 100%, pink); }
CSS 语法
color-mix(color-interpolation-method, color1 %, color2 %)
值 | 描述 |
---|---|
color-interpolation-method |
必需。定义要使用的颜色插值方法。 它由关键字 in 后跟颜色空间名称组成。 可用以下两种类型: 矩形颜色空间:
极坐标颜色空间:
|
color1 % |
必需。要混合的颜色值,以及可选的百分比值(0% 到 100%),用于指定颜色的比例。 默认百分比值为 50%。 |
color2 % |
必需。要混合的颜色值,以及可选的百分比值(0% 到 100%),用于指定颜色的比例。 默认百分比值为 50%。 |
技术细节
版本: | CSS Color Module Level 5 |
---|
浏览器支持
表格中的数字表示首个完全支持该函数的浏览器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
111 | 111 | 113 | 16.2 | 97 |
相关页面
参考:CSS 颜色
- 上一页 CSS color() 函数
- 下一页 CSS conic-gradient() 函数
- 返回上一层 CSS 函数参考手册