作者： 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。