CSS color-mix() 语法
在 CSS 中，color-mix() 函数用于将两种颜色进行混合，然后生成一种新的颜色值。
使用 color-mix() 函数，我们可以根据指定的比例来混合颜色，并且可以选择不同的颜色空间（如 srgb、hsl、lab 等）来控制混合效果。
语法：
color-mix(in colorspace, color1 [percentage], color2 [percentage])说明：
color-mix() 函数接收以下参数。
in colorspace（必选）：用于指定颜色混合时使用的颜色空间。例如：srgb（默认）：标准红绿蓝颜色空间。hsl：色相、饱和度、亮度颜色空间。hwb：色相、白色、黑色颜色空间。lab：更接近人眼感知的颜色空间。lch：在 lab 的基础上进一步优化。
color1 和 color2 （必选）：用于指定要混合的两种颜色。你可以使用任何有效的 CSS 颜色值，包括：percentage（可选）：用于指定每种颜色的混合比例，范围是 0% 到 100%。如果未指定，才会采用默认值（即 50%），此时表示等量混合。
示例：
color-mix(in srgb, red 70%, blue 30%); /* 70% 红色和 30% 蓝色 */
color-mix(in hsl, yellow 60%, blue 40%); /* 60% 黄色和 40% 蓝色 */在使用 color-mix() 函数时，小伙伴们还需要清楚以下几点：
1. color-mix() 支持多种颜色空间
color-mix() 支持多种颜色空间，如 srgb、hsl、lab 等。它允许你更加精确地控制颜色混合效果。
特别是 lab 颜色空间，它更接近人类的视觉感知，使得颜色的混合更自然。
2. color-mix() 混合比例必须使用百分比
color-mix() 混合比例必须使用百分比值（如 50%）。不支持使用无单位的数字。
示例：
color-mix(in srgb, red 30%, green 70%); /* 30% 红色和 70% 绿色 */3. color-mix() 可以与其他 CSS 函数结合使用
color-mix() 函数可以与其他 CSS 函数（如 var()、calc() 等）结合使用，从而实现更动态的效果。
示例：
background-color: color-mix(in hsl, var(--primary-color), var(--secondary-color));4. 无效颜色值的处理
如果混合的颜色值无效（例如无效的颜色格式），那么浏览器会回退使用默认颜色，通常是透明或继承值。
CSS color-mix() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS color-mix() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS color-mix() 函数是如何使用的。
示例 1：color-mix() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background-color: color-mix(in srgb, red 50%, blue 50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
color-mix(in srgb, red 50%, blue 50%) 表示将红色和蓝色以 50% 的比例在 srgb 颜色空间中混合，最终生成紫色（即 rgb(128, 0, 128)）。
示例 2：color-mix() 使用 HSL 颜色空间混合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background-color: color-mix(in hsl, hsl(120, 100%, 50%) 70%, hsl(240, 100%, 50%) 30%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 hsl 颜色空间来将绿色（hsl(120, 100%, 50%)）和蓝色（hsl(240, 100%, 50%)）以 70% 和 30% 的比例混合，最终结果是一个偏绿的混合色。
示例 3：color-mix() 结合 CSS 变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--primary-color: #ff0000;
--secondary-color: #0000ff;
}
div {
width: 200px;
height: 100px;
background-color: color-mix(in srgb, var(--primary-color) 60%, var(--secondary-color) 40%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们定义了 2 个 CSS 变量：--primary-color 和 --secondary-color。然后，使用 color-mix() 函数动态混合红色和蓝色（60% 和 40%）。
示例 4：color-mix() 实现响应式颜色混合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height: 100px;
background-color: color-mix(in lab, yellow 50%, green 50%);
}
@media (max-width: 1200px) {
div {
background-color: color-mix(in lab, yellow 80%, green 20%);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>当浏览器尺寸大于 1200px 时，页面效果如下图 1 所示。当浏览器尺寸小于等于 1200px 时，页面效果如下图 2 所示。
分析：
在这个例子中，color-mix() 使用 lab 颜色空间以 50% 来混合黄色和绿色。
然后，我们使用 CSS 媒体查询，使得当屏幕宽度小于等于 1200px 时，混合比例调整为 80% 黄色和 20% 绿色，从而生成更亮的颜色。
