UD5工具箱
mix-blend-mode（元素混合模式）
定义：CSS属性，用于控制元素内容与其父元素或下层元素的混合方式。该属性作用于元素的整体渲染结果，包括元素的内容、背景和边框。在本工具中，mix-blend-mode功能模块允许用户预览两个不同颜色元素重叠时的混合效果。
background-blend-mode（背景混合模式）
定义：CSS属性，用于控制同一元素内多个背景图层之间的混合方式。当元素设置了多个background-image或background-color时，该属性决定了它们如何叠加显示。在本工具中，background-blend-mode功能模块帮助用户理解渐变图案与背景色在不同混合模式下的叠加效果。
normal（正常模式）
定义：默认的混合模式，不进行任何颜色混合计算。上层元素完全覆盖下层元素，只显示上层元素的颜色。在本工具中，选择normal模式可以查看没有混合效果时的原始颜色状态，作为其他模式效果的基准参照。
multiply（正片叠底模式）
定义：将上层颜色与下层颜色相乘，结果颜色总是比原始颜色更暗。任何颜色与黑色混合产生黑色，与白色混合保持不变。在本工具中，multiply模式能够展示暗化效果，常用于创建阴影和叠加纹理。这是最常用的混合模式之一，在图像合成中有广泛应用。
screen（滤色模式）
定义：将上层颜色取反后与下层颜色相乘，再取反。结果颜色总是比原始颜色更亮，效果类似于两个幻灯片同时投影到同一个屏幕上。在本工具中，screen模式能产生明亮的发光效果，常用于创建光效、高光和叠加亮色纹理。与multiply模式相反，screen模式通过提亮来混合颜色。
overlay（叠加模式）
定义：根据下层颜色的亮度来决定是使用multiply还是screen模式。暗区使用multiply模式使颜色更暗，亮区使用screen模式使颜色更亮。在本工具中，overlay模式能够增强颜色对比度，让暗部更暗、亮部更亮，常用于创建戏剧性的视觉效果和增强纹理细节。
color-dodge（颜色减淡模式）
定义：通过降低对比度来提亮下层颜色，以反映上层颜色。如果上层颜色是黑色，结果保持下层颜色不变。在本工具中，color-dodge模式能产生强烈的高光和发光效果，适合模拟光源照射和创建霓虹灯般的视觉特效。该模式的结果通常比screen模式更亮。
color-burn（颜色加深模式）
定义：通过增加对比度来加深下层颜色，以反映上层颜色。如果上层颜色是白色，结果保持下层颜色不变。在本工具中，color-burn模式能产生深邃的暗部效果和强烈的对比，常用于创建复古风格和戏剧性的阴影效果。该模式的结果通常比multiply模式更暗。
soft-light（柔光模式）
定义：效果类似于将柔和的聚光灯照射在图像上。根据上层颜色的亮度，使用darken或lighten模式进行混合，但效果比overlay模式更柔和。在本工具中，soft-light模式能够创建微妙的色彩偏移和柔和的对比增强，适合需要细微调整而非强烈混合的场景。
hard-light（强光模式）
定义：效果类似于将强烈的聚光灯照射在图像上。根据上层颜色的亮度，使用multiply或screen模式进行混合，但方向与overlay模式相反。在本工具中，hard-light模式能产生强烈的对比和鲜艳的色彩效果，适合创建高对比度的视觉设计和艺术效果。
difference（差值模式）
定义：从较亮的颜色中减去较暗的颜色。任何颜色与白色混合产生其补色，与黑色混合保持不变。在本工具中，difference模式能产生强烈的反色效果，常用于创建反转色彩的视觉特效和检测两个图层之间的差异。该模式的视觉效果独特，适合创意设计。
HSL颜色模型与颜色混合模式
定义：HSL代表色相（Hue）、饱和度（Saturation）和亮度（Lightness），是一种更符合人类直觉的颜色表示方法。在CSS混合模式中，hue（色相）、saturation（饱和度）和luminosity（亮度）三种混合模式分别只混合颜色的对应分量。在本工具中，理解HSL模型有助于预测不同混合模式下的颜色变化结果，特别是color和luminosity模式的表现。