![CSS Tutorial](/css/images/css-mini-logo.jpg)
- CSS 教程
- CSS - 首页
- CSS - 路线图
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图片
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 块级边框
- CSS - 内联边框
- CSS - 外边距
- CSS - 列表
- CSS - 内边距
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 块内元素
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS - 清除浮动
- CSS - 浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 焦点
- CSS - 缩放
- CSS - 位移
- CSS - 高度
- CSS - 连字符字符
- CSS - 宽度
- CSS - 透明度
- CSS - Z-Index
- CSS - 底部
- CSS - 导航栏
- CSS - 叠加层
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 计数器
- CSS - 剪切
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS - min-content
- CSS - 全部
- CSS - 内嵌
- CSS - 隔离
- CSS - 溢出滚动
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - 指针事件
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - 最大块级尺寸
- CSS - 最小块级尺寸
- CSS - 混合模式
- CSS - 最大内联尺寸
- CSS - 最小内联尺寸
- CSS - 偏移量
- CSS - 强调色
- CSS - 用户选择
- CSS 高级
- CSS - 网格
- CSS - 网格布局
- CSS - Flexbox
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文字效果
- CSS - 分页媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图片精灵
- CSS - !important
- CSS - 数据类型
- CSS3 教程
- CSS3 - 教程
- CSS - 圆角
- CSS - 边框图片
- CSS - 多重背景
- CSS - 颜色
- CSS - 渐变
- CSS - 盒阴影
- CSS - 盒装饰中断
- CSS - 光标颜色
- CSS - 文本阴影
- CSS - 文本
- CSS - 2D 变换
- CSS - 3D 变换
- CSS - 过渡
- CSS - 动画
- CSS - 多列
- CSS - 盒尺寸
- CSS - 工具提示
- CSS - 按钮
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 函数
- CSS - 数学函数
- CSS - 遮罩
- CSS - 形状
- CSS - 样式图片
- CSS - 特效性
- CSS - 自定义属性
- CSS 响应式
- CSS RWD - 简介
- CSS RWD - 视口
- CSS RWD - 网格视图
- CSS RWD - 媒体查询
- CSS RWD - 图片
- CSS RWD - 视频
- CSS RWD - 框架
- CSS 工具
- CSS - PX 到 EM 转换器
- CSS - 颜色选择器和动画
- CSS 资源
- CSS - 有用资源
- CSS - 讨论
CSS 函数 - color-mix()
CSS 中的 color-mix() 函数采用两个 <color> 值作为参数,并返回在特定颜色空间中以给定量混合的两个指定颜色的混合结果。
可能的值
color-mix() 函数的功能表示法为 color-mix(method, color1[ p1], color2[ p2])。
method:这是一个 <color-interpolation-method>,用于指定插值颜色空间。
color1, color2:保存将要混合的 <color> 值。
p1, p2:这是一个可选值,用于指定要混合的颜色量。用 <percentage> 值表示,介于 0% 和 100% 之间。
当 p1 和 p2 均未指定时,则 p1 = p2 = 50%。
当 p1 未指定时,则 p1 = 100% - p2。
当 p2 未指定时,则 p2 = 100% - p1。
当 p1 = p2 = 0% 时,函数无效。
当 p1 + p2 不等于 100 时,则 p1' = p1 / (p1 + p2) 和 p2' = p2 / (p1 + p2),其中 p1' 和 p2' 是归一化结果。
以下是不同的 color-interpolation-method:
<rectangular-color-space>:srgb、srgb-linear、lab、oklab、xyz、xyz-d50、xyz-d65
<polar-color-space>:hsl、hwb、lch、oklch
<hue-interpolation-method>:shorter、longer、increasing、decreasing
语法
color(display-p3 0.45 1 0) | color(display-p3 0.45 1 0 / 0.4)
CSS color-mix() - rectangular-color-space (srgb)
以下是一个示例,它显示了基于 p1 和 p2 值(要混合的颜色量)混合颜色(color1 和 color2)的情况。color-interpolation-method 为 rectangular-color-space (srgb)
<html> <head> <style> .container { display: flex; border: 3px solid blue; padding: 5px; width: 350px; } #sample-div { width: 80px; height: 80px; border: 2px solid black; margin-right: 10px; } .color-srgb-p1 { background-color: color-mix(in srgb, #65ef23 90%, yellow); } .color-srgb-p2 { background-color: color-mix(in srgb, #65ef23, yellow 80%); } .color-srgb-none { background-color: color-mix(in srgb, #65ef23, yellow); } .color-srgb-both { background-color: color-mix(in srgb, #65ef23 20%, yellow 45%); } </style> </head> <body> <h2>Normalization of colors based on p1 and p2</h2> <div class="container"> <div class="color-srgb-p1" id="sample-div">p1=90%</div> <div class="color-srgb-p2" id="sample-div">p2=80%</div> <div class="color-srgb-none" id="sample-div">none</div> <div class="color-srgb-both" id="sample-div">p1=20% p2=45%</div> </div> </body> </html>
CSS color-mix() - polar-color-space (hsl)
以下是一个示例,它显示了基于 p1 和 p2 值(要混合的颜色量)混合颜色(color1 和 color2)的情况。color-interpolation-method 为 polar-color-space (hsl)
<html> <head> <style> .container { display: flex; border: 3px solid blue; padding: 5px; width: 350px; } #sample-div { width: 80px; height: 80px; border: 2px solid black; margin-right: 10px; } .color-hsl-p1 { background-color: color-mix(in hsl, #90b 90%, white); } .color-hsl-p2 { background-color: color-mix(in hsl, #90b, white 80%); } .color-hsl-none { background-color: color-mix(in hsl, #90b, white); } .color-hsl-both { background-color: color-mix(in hsl, #90b 20%, white 45%); } </style> </head> <body> <h2>Normalization of colors - hsl colorspace</h2> <div class="container"> <div class="color-hsl-p1" id="sample-div">p1=90%</div> <div class="color-hsl-p2" id="sample-div">p2=80%</div> <div class="color-hsl-none" id="sample-div">none</div> <div class="color-hsl-both" id="sample-div">p1=20% p2=45%</div> </div> </body> </html>
CSS color-mix() - hue-interpolation-method (lch)
以下是一个示例,它显示了基于 p1 和 p2 值(要混合的颜色量)混合颜色(color1 和 color2)的情况。color-interpolation-method 为 hue-interpolation-method (lch)
<html> <head> <style> .container { display: flex; border: 3px solid blue; padding: 10px; width: 700px; } #sample-div { width: 100px; height: 100px; border: 2px solid black; margin-right: 10px; } .color-lch-color1 { background-color: lch(50% 100% 200); } .color-lch-color2 { background-color: lch(100% 50 200); } .color-shorter { background-color: color-mix(in lch shorter hue, lch(50% 100% 200), lch(100% 50 200) ); } .color-longer { background-color: color-mix(in lch longer hue, lch(50% 100% 200), lch(100% 50 200) ); } .color-increasing { background-color: color-mix(in lch increasing hue, lch(50% 100% 200), lch(100% 50 200) ); } .color-decreasing { background-color: color-mix(in lch decreasing hue, lch(50% 100% 200), lch(100% 50% 200) ); } </style> </head> <body> <h2>hue interpolation method</h2> <div class="container"> <div class="color-lch-color1" id="sample-div">p1=90%</div> <div class="color-lch-color2" id="sample-div">p2=80%</div> <div class="color-shorter" id="sample-div">shorter</div> <div class="color-longer" id="sample-div">longer</div> <div class="color-increasing" id="sample-div">increasing</div> <div class="color-decreasing" id="sample-div">decreasing</div> </div> </body> </html>