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

37次阅读

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

正文完
 0