共计 3512 个字符，预计需要花费 9 分钟才能阅读完成。
作者：Ahmad Shaeed
译者：前端小智
起源：css-tricks
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
什么是混合？
依据维基百科：
数字图像编辑和计算机图形中的混合模式 (或混合模式) 用于确定两个图层如何互相混合。在大多数应用程序中，默认的混合模式只是通过用顶层的内容笼罩底层来暗藏底层。
在 CSS 中，有两个属性负责混合。mix-blend-mode用于混合 DOM 元素，background-blend-mode用于组合多个 CSS 背景。
进入mix-Blend-Mode
根底范例
咱们以一个根本的例子来看一下它是如何工作的。我的题目上方有一个圆圈。我要做的是将文本与圆混合。
HTML
<div class="circle"></div>
<p>Blend Me</p>CSS
为文本元素增加了mix-blend-mode: overlay，从而将其与圆混合。
事例源码：https://codepen.io/shadeed/pe…
带文字的图片
我认为这是一个宽泛应用的混合模式。文字在下面，图片在上面。
在题目中增加了以下内容：
.hero-title {
color: #000;
mix-blend-mode: overlay;
}不仅仅是扭转混合模式。例如，咱们能够通过创立动画来进步创意。
在此示例中，我想探讨文本如何与树叶背景交融。因为图像中蕴含暗点和亮点，因而在使文本看起来像在每片叶子下挪动一样，这将起到十分有用的作用。
事例源码：https://codepen.io/shadeed/pe…
带有 SVG 图形的文本
个乏味的成果是在带有矢量和形态的背景上有一个题目。当形态的色彩不同时，它会变得更加乏味。
咱们能用这些斑点形态做什么? 我应用 MorphSVG 插件扭转每个博客形态的门路。这产生了一个乏味的后果。
事例源码：https://codepen.io/shadeed/pe…
混合实在元素
吸引我眼球的成果是当元素有红色背景和彩色前景应用mix-blend-mode: screen。
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
放大镜类
我应用了 SVG，并对其利用了以下内容。留神应用屏幕时彩色区域如何变为通明。
事例源码：https://codepen.io/shadeed/pe…
视频封面
对我来说，这是一个十分有用的用例。我常常须要增加播放图标以批示文章中有视频，因而我最终应用了从核心通明的 SVG。
这听起来仿佛正确，但有肯定局限性。如果要增加悬停成果以填充三角形怎么办？因为在 SVG 中减去了形态，因而这是不可能的。一种解决办法是在 SVG 前面搁置一个圆圈，并在悬停时对其进行着色。
对我来说，这还不够。我也想反过来，三角形必须是红色的，其余的是蓝色的。
多亏了混合模式，我能够通过在悬停时管制嵌入式 SVG 疾速实现改成果。
.article__play {mix-blend-mode: screen;}
.article:hover .article__play {mix-blend-mode: normal;}
.article:hover .article__play {
.play__base {fill: #005FFF;}
.play__icon {fill: #fff;}
}
事例源码：https://codepen.io/shadeed/pe…
储值卡
另一种状况是应用裁切图像并将其与其下方的背景交融，后果十分乏味。
img {
position: absolute;
right: -15px;
top: 0;
width: 110px;
mix-blend-mode: screen;
}这个想法是把图片放在左边，右边有题目和形容。
同样，通过为每张卡增加多个背景能够更好:
事例源码：https://codepen.io/shadeed/pe…
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
从徽标背景中删除红色
我在 Photoshop 的晚期就晓得这个技巧。有时，我须要一个品牌的标记，它是很难失去一个通明的 PNG 版本。应用混合模式，这很容易解决。
我模仿了 Facebook 和 Amazon 徽标，并在每个徽标下增加了红色背景。
当初来解决这个问题，增加了以下 CSS：
img {
mix-blend-mode: multiply;
filter: contrast(2);
}留神，我增加了 filter: contrast(2) 来减少徽标的对比度。利用混合成果使他们比原来的色彩深一点。
问题已解决！当然，我不倡议应用此性能。然而，如果我被迫这么做，我将应用它来节省时间，当原始徽标达到时，我能够替换它并打消混合成果。
事例源码：https://codepen.io/shadeed/pe…
Isolation
isolation CSS 属性定义该元素是否必须创立一个新的层叠上下文（stacking context）。
该属性的次要作用是当和 background-blend-mode 属性一起应用时，能够只混合一个指定元素栈的背景：它容许使一组元素从它们前面的背景中独立进去，只混合这组元素的背景。
html
<div>
<span>CSS is Awesome</span>
</div>css
div {isolation: isolate; /* Creates a new stacking context */}
span {mix-blend-mode: difference;}
如你所见，文本“CSS 很棒”仅在其父代的边界内融合。里面的货色不会混在一起。换句话说，它是孤立的。
事例源码：https://codepen.io/shadeed/pe…
isolation 能够通过应用创立新的堆栈上下文的属性来实现。例如，如果父元素具备opacity 属性，这将影响后果。
html
<div>
<img src="cake.jpg" alt="">
</div>css
div {opacity: 0.99; /* Creates a new stacking context, which result to an isolated group */}
img {mix-blend-mode: difference;}
事例源码：https://codepen.io/shadeed/pe…
进入 Background-Blend-Mode
它的工作形式相似mix-blend-mode，但具备多个背景图像。每个背景能够有本人的混合模式，举个例子。
在此示例中，将三层混合在一起：根底图像，实心填充 (Solid Fill) 和突变填充(radient Fill.)。
.elem {background: linear-gradient(45deg, #000 10%, transparent),
linear-gradient(#3754C7, #3754C7),
url(nature.jpg);
background-size: cover;
background-blend-mode: overlay, color;
}在 CSS 中，应该以正确的形式对每个背景进行排序。重叠程序从上到下，如上图所示。
事例源码：https://codepen.io/shadeed/pe…
着色图像
通过应用径向梯度，有一些乏味的后果比有用。这个想法是增加一个黑白的图像，使它与它混合。
:root {
--color: #000;
--size: 250px; /* Gradient Size */
}
.elem-1 {background: radial-gradient(circle var(--size) at center, transparent, var(--color)),
url(nature.jpg);
}
通过对元素利用background-blend-mode: color，后果是图像的去饱和版本。
事例源码：https://codepen.io/shadeed/pe…
浏览器反对
原文：https://css-tricks.com/basics…
编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。