前几天我写了两篇关于css的文章,热度都还不错。
# 原创动画《优弧,你小子!》
# 倾情奉献,纯css(无图,无JS)原创中秋贺卡!!!
看来大家对 CSS 的兴趣度更高。
很多同学在开发中看到一些特殊的图形就发愁,都找设计出图怕显得自己水平低,百度查找解决方案又会浪费很多时间。而且最终通过copy实现效果,往往自己并没有学会,下次遇到还得靠百度。
CSS 进阶是前端领域比较简单的一个方向,它不仅可以直观的满足我们的成就感,并且在工作中也能够大大提高工作效率。
我作为热衷于技术分享的前端仔,向来是毫无保留的给大家分享自己的心得。
本期就给大家分享一下 CSS 的高阶技巧 –
blend-mode 混合模式
。不止是 css 属性讲解,更有详细的使用心得,帮助大家不止“会用”,还要“会”用!
如果你用过 ps,pr 等类似的p图或视频剪辑软件,应该知道图层的混合模式。用通俗的话来说就是,当两个图像叠加在一起的时候,设置上层图像以什么形式与下层图像叠加,例如正片叠底,滤色混合等。
使用混合模式你要有图层的概念,混合时是将上层图层与下层图层进行混合,生成结果色。你需要了解以下三个名词:
background-blend-mode
和mix-blend-mode
的混合模式种类基本一致,这么多模式其实可以分为 6 大类,我整理成了以下表格:
混合模式六大类 | 混合模式类型 | background-blend-mode | mix-blend-mode |
---|---|---|---|
(一)覆盖组 | normal(默认值。设置正常的混合模式) | ✅ | ✅ |
(二)变暗组 | darken(变暗模式) | ✅ | ✅ |
- | multiply(正片叠底模式) | ✅ | ✅ |
- | color-burn(颜色加深模式) | ✅ | ✅ |
(三)变亮组 | lighten(变亮模式) | ✅ | ✅ |
- | plus-lighter(类似于亮色,但对中色调的影响更大) | ❌ | ✅ |
- | screen(滤色模式) | ✅ | ✅ |
- | color-dodge(颜色减淡模式) | ✅ | ✅ |
(四)对比组 | overlay(叠加模式) | ✅ | ✅ |
- | soft-light(柔光模式) | ✅ | ✅ |
- | hard-light(强光模式) | ✅ | ✅ |
(五)差集组 | difference(差值模式) | ✅ | ✅ |
- | exclusion(排除模式) | ✅ | ✅ |
(六)颜色组 | hue(色调混合模式) | ✅ | ✅ |
- | saturation(饱和度模式) | ✅ | ✅ |
- | color(颜色模式) | ✅ | ✅ |
- | luminosity(亮度模式) | ✅ | ✅ |
css的混合模式属性有以下两种:
background-blend-mode
: 设置元素本身多个背景的混合模式(可以是背景色,背景图);
mix-blend-mode
: 设置元素背景或内容与外界的混合模式;
ps: 有些教程介绍mix-blend-mode
都是说与直系父元素的内容或背景混合,其实是把范围说小了,只要是元素以外的元素就可以混合,包括兄弟元素,隔代兄弟元素等。
在使用 mix-blend-mode
设置元素背景和外界元素背景的混合模式时,该元素一定要处于图层上方,这个一般不会出错,只要在未设置混合模式前,能看到该元素可以覆盖下方背景就行。
但是使用background-blend-mode
时就要注意了!!!
如果你是设置了多个background-image,一定要注意这几个背景的书写顺序,因为书写顺序即代表了图层覆盖顺序,即使你使用了同一个混合模式,修改背景顺序,效果可能就会发生改变,因为图层顺序一变,
基色
和混合色
就变了。background-image设置多个背景时,书写顺序和图层顺序是反的。
同理。如果你是background-image
和background-color
混搭设置背景,那么background-image
势必会被作为混合色
,因为css属性的优先级问题,当元素同时设置 background-image 和 background-color,background-image肯定会在上层。
举个例子:用下面三个图层分别按照下方代码中的 背景1 , 背景2 , 背景3 进行混合。
//背景1
.demo{
background: linear-gradient(red,red),url(https://p3-passport.byteacctimg.com/img/user-avatar/f51713bb5df34d682e00c40d5078b95e~180x180.awebp);
background-color: green;
background-size: 100% 50%;
background-blend-mode: overlay;
}
//背景2 修改 background-image 顺序
.demo{
background: url(https://p3-passport.byteacctimg.com/img/user-avatar/f51713bb5df34d682e00c40d5078b95e~180x180.awebp),linear-gradient(red,red);
background-color: green;
background-size: 100% 50%;
background-blend-mode: overlay;
}
//背景3 替换 background-image 和 background-color顺序
.demo{
background-color: green;
background-image: url(https://p3-passport.byteacctimg.com/img/user-avatar/f51713bb5df34d682e00c40d5078b95e~180x180.awebp),linear-gradient(red,red);
background-size: 100% 50%;
background-blend-mode: overlay;
}
<div class="demo"></div>
背景1-------------- 背景2-------------- 背景3
你会发现修改了背景顺序后,效果发生了变化。因为背景1的混合色是纯红色背景,基色是图片和绿色背景;背景2的混合色是图片,基色是红色和绿色背景。
每个混合模式都有特定的计算公式,图像混合后的
结果色
都是根据混合色
和基色
计算得来的。
当然了,我们是前端,而不是设计,所以没必要去深究这些计算公式,也没必要特别清楚的知道每个混合模式的作用。
我们要做的就是了解它,知道它的一些使用场景,拓宽css思维,在一些需要进行图像融合,图像变色的场景能够想到它其实就足够了。
接下来我们将用 “白至黑色的渐变色背景作为混合色” 和 “一张背景图作为基色” 尝试进行各种混合。如下:
不设置混合模式默认就是图层覆盖模式。就是将两个图像正常覆盖,上层的图像会完全遮挡下层图像,只能通过修改上层图像的透明度,才能显示下层图像。
变暗组的特点是,去掉亮色,保留暗色,画面变暗。和黑色混合会变黑色,和白色混合没有效果。
变暗组一般常用darken变暗
和multiply正片叠底
变暗混合效果:
正片叠底混合效果:
和变暗组相反,变亮组的特点是:去掉暗色,保留亮色,画面变亮。和白色混合会变白色,和黑色混合没有效果。
变亮组一般常用lighten变亮
和screen滤色
变亮混合效果:
滤色混合效果:
对比组的特点是:亮的地方更亮,暗的地方更暗。
叠加混合效果:
强光混合效果:
柔光混合效果:
差集组很少用到。这里只说一个下面要用到的差值混合:用“基色”高的亮度值减去“混合色”低的亮度值班,作为合成后的颜色。结果为负数的时候,则取其正值,产生反相效果。
颜色组的特点是:可以修改上方图层的色相、饱和度、明度。
用一个橙色背景和背景图进行颜色混合:
想必大家都见过这样一个效果:“有背景纹理的文字”。一般是用background-clip: text
配合文字color
设置为透明transparent
实现,如下:
background: url(https://img.soogif.com/nPDlpcA4rbLlcomTkAEGbqrjwfMk2m8W.gif);
background-clip: text;
-webkit-background-clip: text;
color:transparent;
如果文字周围背景色是白色或黑色的话,其实也可以用混合模式实现,例如要实现上面效果,只要给文字设置个白色背景色,文字颜色改为黑色,然后设置lighten变亮混合
或screen滤色混合
即可实现,如下:
jcode
与此类似的,还有种效果:在图片上显示文字,让文字和背景图更加融合,看起来更加美观,我们就可以利用css 混合模式的 overlay
叠加模式实现,效果如下:
div{
background: url(https://img2.baidu.com/it/u=1153843221,3035808032&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800);
}
p{
color: #fff;
mix-blend-mode: overlay;
}
<div>
<p>稀土掘金</p>
</div>
我们把第一个案例中的混合模式改为 difference
差值模式,你会发现效果非常神奇,如下图:
这种错位的感觉是不是很有意思,那么你可能见过下面这种效果,同样是通过差值混合实现的:
#box{
...
background-image: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
}
p{
...
color: #fff;
mix-blend-mode: difference;
}
<div id="box">
<p>稀土掘金</p>
</div>
还得上面我讲的变暗组的特点吗,图像和黑色混合会变黑色,和白色混合没有效果。
利用好这个特点可以实现很多有意思的效果。以传统的css思维来讲,想要遮盖住一个图像,就是利用图层的层叠关系,让遮盖物处于被遮盖物的上方。
那能不能让下层图像呈现遮盖住上层图像的效果呢?
答案是:能!!!
奇妙之处就在于利用 混合模式变暗组叠黑得黑,变亮组叠白得白
的特点。
举个例子,想想怎么实现手电筒效果(文字被纯黑色背景遮住,当手电筒的光照到哪就能看到哪的文字)。
按照变暗组叠黑得黑
的思路往下走,如果文字遇到黑色背景进行混合,整体就会全变黑,就可以实现 “伪遮盖” 的效果。
那怎么实现光照到哪就看到哪的文字呢?很简单,想让文字显示出来,只要叠的基色不是黑色不就行了。那只要在光照的区域修改黑色背景为白色即可。
怎么修改?其实不是修改,只是利用图层层叠关系,白光作为一个非黑色背景图遮盖住底部黑色背景即可。
最终效果就出来了,在下方码上掘金体验效果:
jcode
这里引申一下: 按照常规思维实现手电筒效果也是可以的,其实比混合模式更简单,但是掌握混合模式的解决方案能够拓展css思维。
例如用黑色背景遮挡底部文字,然后利用css的mask
属性设置透明色渐变抠掉黑色背景的一部分,这样下方文字就能露出来了。再比如还是用黑色背景遮挡底部文字,但是黑色背景改用radial-gradient
径向渐变实现,渐变中心用transparent透明色就可以漏出下方文字了。
利用混合模式将图像和不同纹理图片混合,可以呈现不一样的效果。
jcode
日常工作中,经常会遇到同一个icon不同色的场景,如果用的是svg图标还好,如果是图片的话,是不是就得找设计师重新切图了。
实际上,利用混合模式是可以实现将icon变色的。当然了,不是所有图标都能应用。一般最好是白底黑色图标,这样再叠一层任意的背景色,肯定会比黑色图标亮,比白底暗,然后设置变亮组
的混合模式,可以是lighten
或者screen
,就可以实现icon变色啦。
//示例:黑色图标变红色
div{
background-image: linear-gradient(red,red),url(https://img2.baidu.com/it/u=671964138,3995066917&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500);
background-blend-mode: lighten;
}
将文字利用before
、after
伪元素分别复制一份然后设置晃动动画,同时设置红蓝文字的混合模式为lighten变亮混合
,即可实现文字故障效果,如下:
jcode
jcode
当元素设置了混合模式,它会和下方所有被覆盖到的图像进行混合。例如现在有红绿蓝三个色块层叠在一起,层叠关系如图所示:
然后我们给蓝色色块设置overlay叠加混合
,结果如下:
可以看到,蓝色与绿色色块重合的部分进行混合了,与红色色块重合的部分也进行混合了。如果我现在只想和绿色色块混合,能不能做到呢?
答案是:能!
利用css属性 isolation
就能实现。isolation属性可以定义元素是否必须创建新的堆叠内容,相当于把设置了该属性的元素内所有内容与外界隔离,形成新的堆叠上下文。那么实现只与绿色混合,只需要把绿色和蓝色放同一个元素下,并给父元素设置 isolation: isolate
即可,如下:
.box{
isolation: isolate;
}
<div class="red"></div>
<div class="box">
<div class="green"></div>
<div class="blue"></div>
</div>
混合模式是css里的一个高级技巧,它可以实现很多意想不到的效果。这个需要丰富的想象力,并且要建立在你对各种混合模式的有一定的理解的基础上。如果你只是知道有这个属性,而使用纯靠瞎猫碰死耗子,那你估计是很难创造出有价值有观赏性的效果的。
混合模式种类虽然很多,但是常用的就那几种,例如:变暗,正片叠底,变亮,滤色,叠加。尤其是变暗变亮组与黑白背景混合时的特点,再配合css动画,可以实现很多有意思的效果。
我是喜欢归纳总结前端相关知识的前端阿彬,个人创作不易,您的点赞·关注·评论·转发 是我坚持下去的动力
往期文章:
# 倾情奉献,纯css(无图,无JS)原创中秋贺卡!
# “钉钉官网首页的炫酷动效” 被我用css新特性轻松破解啦~
# CSS魔术师Houdini,用浏览器引擎实现高级CSS效果
# ⛳前端进阶:SEO 全方位解决方案
# 我给自己搭建的前端导航网站,你们都别用
# 2023 最新最细 vite+vue3+ts 多页面项目架构,建议收藏备用!
# 2023 前端性能优化清单