乐趣区

关于javascript:CSS中的混合模式制作高级特效的必备技巧

jiezi

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

退出移动版