论坛 › 马黑黑教程专版 › CSS混合模式mix-blend-mode滤镜

马黑黑 发表于 2022-4-10 16:29

CSS混合模式mix-blend-mode滤镜

本帖最后由 马黑黑 于 2022-4-10 16:32 编辑 <br /><br /><style>
.mnDiv { margin: auto; padding: 8px; font:normal 1em/1.2em Sans-serif; }
.mnDiv p { padding: 6px 0 6px 0; }
.mnDiv h1 { font: 900 1.5em / 2em Sans-serif; text-align: center; }
.tbl { border-collapse: collapse; width: 100%; }
.tbl td, .tbl th { border: 1px solid olive; padding: 8px; }
.tbl tr:nth-child(even) { background-color: #f2f2f2; }
.tbl tr:hover { background-color: #ddd; }
.tbl th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: olive; color: white; text-align:center; }
</style>

<div class="mnDiv">
        <h1>CSS混合模式滤镜列表</h1>
</div>

<script>
let mixAr = [
        ['normal','默认模式，无混合'],
        ['multiply','基色和目标色复合后替换目标色。合成色至少与基色或目标色一样深。任何颜色与黑色复合得到黑色。任何颜色与白色复合保持初始颜色'],
        ['screen', '把背景色的互补色与基色混合，取结果的互补色。。合成色至少和两个构成色一样浅。任何颜色与白色滤色产生白色；和黑色滤色颜色不变。效果类似于在一个屏幕上投影多个幻灯片'],
        ['overlay','对颜色正片叠底或滤色依赖于背景色值。基色覆盖背景同时保留高光和阴影。背景色没有被替换但是与基色混合来反映背景的亮暗'],
        ['darken','选择背景和基色的较暗部分。背景被基色中较暗的部分替换；否则，保持不变'],
        ['lighten','选择背景和基色中较亮的部分。背景被基色中较亮的部分替换；否则，保持不变'],
        ['color-dodge','减淡背景色来反映基色。黑色绘制的部分不变'],
        ['color-burn','加深背景色来反映基色。白色绘制的部分不变'],
        ['hard-light', '对颜色正片叠底或滤色依赖于基色值。效果类似于在背景上用强聚光灯照'],
        ['soft-light','使颜色变暗或变亮，取决于基色值。效果类似于在背景上用发散的聚光灯照'],
        ['difference','从较浅的颜色中减去两个组成颜色的较深部分。白色绘制的部分背景反色；黑色绘制的部分不变'],
        ['exclusion','产生类似于差值模式的效果但是对比度更低。白色绘制的部分背景反色；黑色绘制的部分不变'],
        ['hue','创建于基色的色相、饱和度和亮度相同的颜色'],
        ['saturation','创建饱和度与基色相同，色相和亮度与背景色相同的颜色。在背景是纯灰（没有饱和度）的区域使用这个模式不产生改变'],
        ['color','创建色相和量度和基色相同，饱和度和背景色相同的颜色。保持背景的灰度并且对于给单色图片或图片着色很有用'],
        ['luminosity','创建亮度和基色相同，色相和饱和度与背景色相同的颜色。这个模式产生的效果和Color模式相反']
];
let tblStr = "<table class='tbl'><tr><th style='width:40px;'>序号</th><th style='width: 100px;'>名称</th><th>说明</th></tr>";
for(j=0; j<mixAr.length; j++) {
        tblStr += `<tr><td style='text-align: center'>${j+1}</td><td>${mixAr}</td><td>${mixAr}</td></tr>`;
}
tblStr += "</table>";
document.querySelector(".mnDiv").innerHTML += tblStr;
</script>

马黑黑 发表于 2022-4-10 16:31

应用举例可参阅：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=58556&extra=page%3D1

加林森 发表于 2022-4-10 19:09

谢谢老黑的讲解。

红影 发表于 2022-4-10 20:36

你那个例子里用的就是这个
difference        从较浅的颜色中减去两个组成颜色的较深部分。白色绘制的部分背景反色；黑色绘制的部分不变

看到这个解释，那些字体要用浅色系才会有效果啊。

红影 发表于 2022-4-10 20:37

黑黑辛苦了，讲解很详细。这些效果跟PS里的色彩处理有些相似呢。{:4_187:}
这么多也记不住，看起来做帖子的时候需要回来查它们的功能了

马黑黑 发表于 2022-4-10 21:22

红影 发表于 2022-4-10 20:37
黑黑辛苦了，讲解很详细。这些效果跟PS里的色彩处理有些相似呢。
这么多也记不住，看起来做帖子 ...

嗯，把它当手册就好

红影 发表于 2022-4-11 10:26

马黑黑 发表于 2022-4-10 21:22
嗯，把它当手册就好

饿呢，现在我也有手册了{:4_173:}

马黑黑 发表于 2022-4-11 12:00

红影 发表于 2022-4-11 10:26
饿呢，现在我也有手册了

集合手册中的分手册

红影 发表于 2022-4-12 23:33

马黑黑 发表于 2022-4-11 12:00
集合手册中的分手册

记是肯定记不住的，只能查了。

马黑黑 发表于 2022-4-12 23:57

红影 发表于 2022-4-12 23:33
记是肯定记不住的，只能查了。

单词多但不难

红影 发表于 2022-4-13 20:24

马黑黑 发表于 2022-4-12 23:57
单词多但不难

主要还需要记住这些单词代表的含义啊。还不如直接看你那个演示更清楚{:4_187:}

马黑黑 发表于 2022-4-13 20:25

红影 发表于 2022-4-13 20:24
主要还需要记住这些单词代表的含义啊。还不如直接看你那个演示更清楚

直观的和词义通透的，结合起来学习效果会更好，今后的运用也更能得心应手

红影 发表于 2022-4-15 08:51

马黑黑 发表于 2022-4-13 20:25
直观的和词义通透的，结合起来学习效果会更好，今后的运用也更能得心应手

嗯嗯，那需要使用多点，慢慢在比较中，更熟悉那些效果。

马黑黑 发表于 2022-4-15 12:48

红影 发表于 2022-4-15 08:51
嗯嗯，那需要使用多点，慢慢在比较中，更熟悉那些效果。

说得对

红影 发表于 2022-4-15 13:44

马黑黑 发表于 2022-4-15 12:48
说得对

我已经保留了这个滤镜手册{:4_187:}

马黑黑 发表于 2022-4-15 17:54

红影 发表于 2022-4-15 13:44
我已经保留了这个滤镜手册

辛苦了

红影 发表于 2022-4-15 19:41

马黑黑 发表于 2022-4-15 17:54
辛苦了

应该是你辛苦了才是呢。这个应该也算是文字效果吧，可以把链接连到集中营里呢。

马黑黑 发表于 2022-4-15 20:46

红影 发表于 2022-4-15 19:41
应该是你辛苦了才是呢。这个应该也算是文字效果吧，可以把链接连到集中营里呢。

混合滤镜通用于元素之间，不是专门为文本准备的

红影 发表于 2022-4-17 11:19

马黑黑 发表于 2022-4-15 20:46
混合滤镜通用于元素之间，不是专门为文本准备的

哦哦，也就是说除了文字，别的也能用。知道了{:4_204:}

马黑黑 发表于 2022-4-17 11:24

红影 发表于 2022-4-17 11:19
哦哦，也就是说除了文字，别的也能用。知道了

mix-blend-mode系列滤镜通用语各类元素

查看完整版本: CSS混合模式mix-blend-mode滤镜