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