mix-blend-mode

描述

mix-blend-mode CSS 属性设置元素的内容应如何与元素的父级内容和元素的背景混合。

效果展示

语法

mix-blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue |
saturation | color | luminosity

值

• normal 普通的 这是指定不混合的默认属性。混合公式只是选择源颜色。
• multiply 乘 源颜色乘以目标颜色并替换目标颜色。生成的颜色始终至少与源颜色或目标颜色一样暗。将任何颜色与黑色相乘都会得到黑色。将任何颜色与白色相乘都会保留原始颜色。
• screen 屏幕 将背景颜色值和源颜色值的补色相乘，然后对结果求补。结果颜色始终至少与两种成分颜色中的任何一种一样浅。用白色筛选任何颜色都会产生白色；用黑色筛选使原始颜色保持不变。其效果类似于将多张幻灯片同时投影到单个屏幕上。
• overlay 覆盖 根据背景颜色值，相乘或筛选颜色。源颜色覆盖背景，同时保留其高光和阴影。背景颜色不会被替换，而是与源颜色混合以反映背景的明暗度。
• darken 变暗 选择背景颜色和源颜色中较暗的一个。背景被光源替换为光源较暗的地方；否则，它保持不变。
• lighten 减轻 选择背景颜色和源颜色中较浅的一个。背景被替换为光源较亮的光源；否则，它保持不变。
• color-dodge 颜色减淡 增亮背景颜色以反映源颜色。用黑色绘画不会产生任何变化。
• color-burn 颜色烧伤 使背景颜色变暗以反映源颜色。用白色绘画不会产生任何变化。
• hard-light 强光 根据源颜色值，相乘或筛选颜色。其效果类似于将刺眼的聚光灯照射在背景上。
• soft-light 柔光 根据源颜色值使颜色变暗或变亮。效果类似于将漫射聚光灯照射在背景上。
• difference 不同之处 从较浅的颜色中减去两种组成颜色中较深的颜色。用白色绘画反转背景颜色；用黑色绘画不会产生任何变化。
• exclusion 排除 产生与差异模式类似的效果，但对比度较低。用白色绘画反转背景颜色；用黑色绘画不会产生任何变化
• hue 使用源颜色的色调以及背景颜色的饱和度和亮度创建颜色。
• saturation 饱和 创建具有源颜色的饱和度以及背景颜色的色调和亮度的颜色。使用此模式在纯灰色（无饱和度）背景区域中绘画不会产生任何变化。
• color 颜色 使用源颜色的色调和饱和度以及背景颜色的亮度创建颜色。这保留了背景的灰度级，并且对于对单色图像进行着色或对彩色图像进行着色非常有用。
• luminosity 亮度 使用源颜色的亮度以及背景颜色的色调和饱和度创建颜色。这会产生与颜色模式相反的效果。