【亚洲必赢官网】无缘无故的颜色混合形式,谈谈一些诙谐的CSS标题

有趣的CSS标题(17):莫名其妙的颜色混合格局 mix-blend-mode

2017/05/10 · CSS ·
CSS

本文作者: 伯乐在线 –
chokcoco
。未经我许可,禁止转发!
迎接加入伯乐在线 专栏小编。

CSS3 新增了3个很有意思的品质 — mix-blend-mode ,其中 mix 和 blend
的中文意译均为混合,那么那几个特性的功效直译过来就是混合混合格局,当然,大家我们平日号称错落形式

掺杂格局最常见于 photoshop 中,是 PS
中13分无敌的效益之一。当然,瞎用乱用混合格局哪个人都会,利用混合格局将多少个图层混合得到一个新的机能,只是要用到合适,恐怕说在
CSS 中使用混合情势创设出部分功用则必要对混合格局很深的精通及不断的尝试。

本身个人对混合情势的知晓也不行开始,本文只是引导我们走进 CSS
混合格局的社会风气,初浅的摸底混合方式及尝试采用它制作一些效益。

议论一些诙谐的CSS标题(十七)– 不可名状的颜色混合方式 mix-blend-mode,cssmix-blend-mode

开本连串,谈谈一些妙趣横生的 CSS 标题,标题类型天马行空,想到如何说怎么着,不仅为了拓宽一下缓解难点的笔触,更提到一些便于忽略的
CSS 细节。

解题不考虑包容性,标题天马行空,想到什么说怎么,固然解题中有您感觉到到生僻的
CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,主要的政工说四遍。

商讨一些幽默的CSS标题(一)– 左侧竖条的兑现方式

议论一些有趣的CSS标题(二)– 从条纹边框的贯彻谈盒子模型

座谈一些好玩的CSS标题(三)– 层叠顺序与堆栈上下文知多少

座谈一些妙不可言的CSS标题(四)– 从倒影说起,谈谈 CSS 继承 inherit

议论一些妙趣横生的CSS标题(五)– 单行居中,两行居左,超过两行省略

座谈一些好玩的CSS标题(六)– 全包容的多列均匀布局难点

探究一些有意思的CSS标题(七)– 消失的边界线难题

研商一些好玩的CSS标题(八)– 纯CSS的领航栏Tab切换方案

座谈一些有意思的CSS标题(九)– 巧妙的已毕 CSS 斜线

议论一些诙谐的CSS题目(十)– 结构性伪类采取器

研讨一些妙不可言的CSS题目(十一)– reset.css知多少

探究一些诙谐的CSS标题(十二)– 长远切磋 CSS 个性检测 @supports 与
Modernizr

座谈一些妙趣横生的CSS标题(十三)– 巧妙地创立背景象渐变动画!

研究一些幽默的CSS标题(十四)– 纯 CSS 格局已毕 CSS 动画的暂停与广播!

座谈一些好玩的CSS标题(十五)– 谈谈 CSS 关键字 initial、inherit 和
unset

议论一些有意思的CSS标题(十六)– 奇妙的 background-clip: text

有着标题汇总在本人的 Github 。

本文从那里伊始:

CSS3 新增了一个很有意思的质量 — mix-blend-mode ,其中 mix 和 blend
的国语意译均为混合,那么那脾气情的功力直译过来就是混合混合形式,当然,大家大家平日号称混合形式

错落格局最广泛于 photoshop 中,是 PS
中十三分无敌的功能之一。当然,瞎用乱用混合形式什么人都会,利用混合方式将几个图层混合得到二个新的功效,只是要用到适当,可能说在
CSS 中运用混合情势创设出某些效能则须要对混合情势很深的明亮及不断的尝试。

自家个人对混合方式的了然也充裕初始,本文只是指导我们走进 CSS
混合形式的世界,初浅的摸底混合形式及尝试拔取它创设一些意义。

 

开本种类,谈谈一些诙谐的 CSS 标题,题目类型天马行空,想到什么说哪些,不仅为了拓宽一下缓解难题的笔触,更涉及部分不难忽视的
CSS 细节。

开本连串,谈谈一些幽默的 CSS 标题,题目类型天马行空,想到什么说什么样,不仅为了推广一下消除难点的笔触,更涉及部分容易忽略的
CSS 细节。

mix-blend-mode 概述

【亚洲必赢官网】无缘无故的颜色混合形式,谈谈一些诙谐的CSS标题。上文也说了,mix-blend-mode 描述了成分的内容应当与成分的深情厚意父成分的情节和因素的背景怎么着混合。咱们将
PS 中图层的概念替换为 HTML 中的成分。

探望可取的值有啥:

JavaScript

{ mix-blend-mode: normal; // 符合规律 mix-blend-mode: multiply; // 正片叠底
mix-blend-mode: screen; // 滤色 mix-blend-mode: overlay; // 叠加
mix-blend-mode: darken; // 变暗 mix-blend-mode: lighten; // 变亮
mix-blend-mode: color-dodge; // 颜色减淡 mix-blend-mode: color-burn; //
颜色加深 mix-blend-mode: hard-light; // 强光 mix-blend-mode: soft-light;
// 柔光 mix-blend-mode: difference; // 差值 mix-blend-mode: exclusion;
// 排除 mix-blend-mode: hue; // 色相 mix-blend-mode: saturation; //
饱和度 mix-blend-mode: color; // 颜色 mix-blend-mode: luminosity; //
亮度 mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode:
unset; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度
  
  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承 和 unset 还原那 3 个具有 CSS
属性都可以取的值外,还有其余的 拾伍个具体的取值,对应不一致的混杂效果。

假使不是正规的 PSer
每一日和交集格局打交道,想要记住这么多职能,仍然挺勤奋的。然而有前人帮大家统计了一番,看看怎样比较好的领会只怕说纪念这么些功能,摘自Photoshop中高等进阶连串之一——图层混合方式原理:

亚洲必赢官网 1

理所当然,上图是 PS 中的混合方式,数量比 CSS
中的多出几个,但是分类依然通用的。

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了元素的始末应当与成分的深情父成分的内容和因素的背景怎么样混合。我们将
PS 中图层的定义替换为 HTML 中的成分。

看望可取的值有哪些:

{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度

  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承 和 unset 还原那 3 个具有 CSS
属性都可以取的值外,还有此外的 16 个具体的取值,对应不一致的鱼目混珠效果。

万一不是规范的 PSer
每天和交集情势打交道,想要记住这么多职能,照旧挺艰苦的。然而有前人帮大家统计了一番,看看哪些相比好的接头恐怕说记念那个职能,摘自Photoshop中高等进阶体系之一——图层混合格局原理:

亚洲必赢官网 2

本来,上图是 PS 中的混合方式,数量比 CSS
中的多出多少个,但是分类如故通用的。

 

解题不考虑包容性,标题天马行空,想到怎么着说怎样,假如解题中有您觉得到生僻的
CSS 属性,赶紧去补习一下啊。

解题不考虑兼容性,标题天马行空,想到怎么着说怎么,如果解题中有你倍感到生僻的
CSS 属性,赶紧去补习一下吧。

mix-blend-mode 实例

眼见为实,要会动用 mix-blend-mode ,关键仍旧要迈出使用这一步。那里作者写了三个大约的
Demo,包涵了具有的搅和形式,可以大约试一下各样方式的功能:

See the Pen mix-blend-mode
混合方式示例 by Chokcoco
(@Chokcoco) on
CodePen.

CodePen Demo(-webkit- Only)

自然,仅仅是这么是感受不到混合方式的魔力的,上面就罗列多少个利用了交集格局打造的
CSS 动画。

mix-blend-mode 实例

眼见为实,要会利用 mix-blend-mode ,关键还是要迈出使用这一步。那里作者写了1个归纳的
Demo,包蕴了具有的参差不齐情势,可以大约试一下种种格局的功能:

CodePen Demo(-webkit- Only)

自然,仅仅是如此是感受不到混合方式的魔力的,下边就罗列多少个应用了混合格局打造的
CSS 动画。

不断更新,不断更新,不断更新,首要的事情说三回。

不断更新,不断更新,不断更新,首要的作业说两次。

 

议论一些妙不可言的CSS标题(一)–
左侧竖条的落成情势

商量一些诙谐的CSS标题(一)–
左边竖条的已毕格局

使用 mix-blend-mode: screen 滤色方式营造 loading 效果

为了照看少数访问 codepen 慢同学,特意制作了该意义的 Gif,看看效果:

亚洲必赢官网 3

See the Pen mix-blend-mode:
screen by Chokcoco
(@Chokcoco) on
CodePen.

CodePen Demo(-webkit- Only)

此处运用了 mix-blend-mode: screen 滤色方式,那是一种提亮图像形混合形式。滤色的英文是
screen,约等于八个颜色同时投影到贰个显示器上的合成颜色。具体做法是把三个颜色都反相,相乘,然后再反相。简单回忆为”让白更白,而黑不变”。(不必然极度准确,如有错误还请指正)

咱俩将八个 div
依据分裂延时(animation-delay)小幅度旋转起来,来落成一种很明显很魔性的效劳,适合做
loading 图。

使用 mix-blend-mode: screen 滤色形式营造 loading 效果

为了照看少数访问 codepen 慢同学,特意制作了该意义的 Gif,看看效果:

亚洲必赢官网 4

CodePen Demo(-webkit- Only)

此地运用了 mix-blend-mode: screen 滤色情势,那是一种提亮图像形混合方式。滤色的英文是
screen,相当于八个颜色同时投影到一个显示器上的合成颜色。具体做法是把三个颜色都反相,相乘,然后再反相。简单记念为”让白更白,而黑不变”。(不肯定十一分准确无误,如有错误还请指正)

大家将多少个 div
依照差异延时(animation-delay)小幅度旋转起来,来达到一种很强烈很魔性的功效,适合做
loading 图。

座谈一些有趣的CSS标题(二)–
从条纹边框的贯彻谈盒子模型

座谈一些妙趣横生的CSS题目(二)–
从条纹边框的落到实处谈盒子模型

 

座谈一些幽默的CSS题目(三)–
层叠顺序与堆栈上下文知多少

探讨一些好玩的CSS标题(三)–
层叠顺序与堆栈上下文知多少

使用 mix-blend-mode: difference 差值格局

再举个例子, mix-blend-mode: difference 差值情势。查看各样通道中的颜色消息,相比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与反动混合将使底色反相;与石黄混合则不发生变化。

浅显一点就是下面图层的亮区将人世图层的水彩进行反相,暗区则将颜色不奇怪突显出来,效果与原图像是全然相反的颜料。

看看利用了这一个混合模式,运用在有的多图层效果里,可以生出万分灿烂的搅和效果:

亚洲必赢官网 5

See the Pen pureCssAnimation(webkit
Only) by Chokcoco
(@Chokcoco) on
CodePen.

CodePen Demo(-webkit- Only)

上图接近复杂,其实通晓原理之后分外的简短,6 个旋转的 div
,通过 mix-blend-mode: difference 混合在联合。

使用 mix-blend-mode: difference 差值方式

再举个例子, mix-blend-mode: difference 差值方式。查看各类通道中的颜色音讯,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与墨天灰混合将使底色反相;与玛瑙红混合则不爆发变化。

发轫一点就是上边图层的亮区将人世图层的颜色进行反相,暗区则将颜色寻常展现出来,效果与原图像是全然相反的颜料。

探访利用了这一个混合情势,运用在有的多图层效果里,可以生出相当灿烂的搅和效果:

亚洲必赢官网 6

CodePen Demo(-webkit- Only)

上图接近复杂,其实了解原理之后分外的大约,6 个旋转的 div
,通过 mix-blend-mode: difference 混合在协同。

探究一些好玩的CSS标题(四)–
从倒影说起,谈谈 CSS 继承
inherit

座谈一些有意思的CSS标题(四)–
从倒影说起,谈谈 CSS 继承
inherit

 

商量一些有趣的CSS标题(五)–
单行居中,两行居左,超越两行省略

座谈一些妙不可言的CSS标题(五)–
单行居中,两行居左,超越两行省略

运用多交集形式创设文字故障效果

终极,想到自身事先制作的3个文字故障效果,也足以很好的融合混合情势,制作出下列效果:

亚洲必赢官网 7

See the Pen
mixblendmode制作文字故障效果
by Chokcoco (@Chokcoco) on
CodePen.

CodePen Demo(-webkit- Only)

不用质疑你的眼眸,上图的功效是纯 CSS
已毕的效应,运用了各种颜色混合方式完毕颜色叠加,变亮等作用。

正文涉及的正CEO论知识很少,没有用很大的篇幅去讲述每多个错落方式的职能及功能。我对混合情势的理解也比较通俗,本文意在通过一些
Demo
让读者学会起始去选拔那么些混合情势效能,俗话说修行在个人,假使真的感兴趣的可以自动深远钻研。

动用多交集形式创设文字故障效果

最后,想到自身事先制作的三个文字故障效果,也可以很好的同心协力混合形式,制作出下列效果:

亚洲必赢官网 8

CodePen Demo(-webkit- Only)

不用思疑你的眼眸,上图的出力是纯 CSS
落成的效果,运用了三种颜色混合情势完成颜色叠加,变亮等效用。

本文涉及的正规理论知识很少,没有用很大的字数去讲述每三个错落方式的功能及成效。小编对混合情势的接头也正如浅显,本文目的在于通过有些Demo
让读者学会起先去行使这一个混合形式功效,俗话说修行在个人,即便真的感兴趣的可以活动深刻商讨。

 

座谈一些有意思的CSS标题(六)–
全兼容的多列均匀布局问题

研商一些幽默的CSS标题(六)–
全包容的多列均匀布局难点

兼容性

末尾,看一眼包容性吧,那种古怪的性情包容性温日都某些好,作者事先几篇小说也关乎过了,面向将来编程,所以本文的
CodePen Demo 都务求在 -webkit- 内核浏览器下看到:

亚洲必赢官网 9

到此本文停止,固然还有哪些疑点如故提议,可以多多互换,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

  • 有趣的CSS标题(1):
    左侧竖条的兑现格局
  • 有趣的CSS标题(2):
    从条纹边框的兑现谈盒子模型
  • 有趣的CSS标题(3):
    层叠顺序与堆栈上下文知多少
  • 有意思的CSS题目(4): 从倒影说起,谈谈 CSS 继承
    inherit
  • 有意思的CSS标题(5):
    单行居中,两行居左,超过两行省略
  • 有意思的CSS标题(6):
    全包容的多列均匀布局难题
  • 幽默的CSS标题(7):消失的边界线难题
  • 诙谐的CSS题目(8):纯CSS的领航栏Tab切换方案
  • 有趣的CSS题目(9):巧妙已毕 CSS
    斜线
  • 有意思的CSS题目(10):结构性伪类采纳器
  • 有趣的CSS题目(11):reset.css
    知多少?
  • 诙谐的CSS标题(12):你该知道的字体
    font-family
  • 诙谐的CSS标题(13):巧妙地成立背景象渐变动画!
  • 诙谐的CSS标题(14): 纯 CSS 形式贯彻 CSS
    动画的暂停与广播!
  • 有趣的CSS题目(15): 谈谈 CSS 关键字 initial、inherit 和
    unset
  • 有趣的CSS题目(16): 奇妙的 background-clip:
    text

打赏辅助作者写出越来越多好小说,感谢!

打赏作者

兼容性

终极,看一眼包容性吧,这种奇异的性质包容性温日都有点好,小编事先几篇小说也论及过了,面向今后编程,所以本文的
CodePen Demo 都务求在 -webkit- 内核浏览器下观看:

亚洲必赢官网 10

到此本文为止,即使还有何难题依然指出,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

岂有此理的颜色混合方式 mix-blend-mode,cssmix-blend-mode
开本连串,谈谈一些有意思的 CSS 标题,标题类型天马…

商讨一些好玩的CSS题目(七)–
消失的边界线难题

座谈一些有意思的CSS标题(七)–
消失的边界线难点

打赏帮忙本人写出更加多好作品,感激!

任选一种支付方式

亚洲必赢官网 11
亚洲必赢官网 12

3 赞 3 收藏
评论

座谈一些妙趣横生的CSS标题(八)–
纯CSS的领航栏Tab切换方案

议论一些幽默的CSS标题(八)–
纯CSS的领航栏Tab切换方案

关于小编:chokcoco

亚洲必赢官网 13

经不住小运似水,逃可是此间少年。

个人主页 ·
小编的稿子 ·
63 ·
   

亚洲必赢官网 14

探讨一些妙趣横生的CSS标题(九)–
巧妙的贯彻 CSS
斜线

研商一些诙谐的CSS标题(九)–
巧妙的兑现 CSS
斜线

讨论一些妙趣横生的CSS标题(十)–
结构性伪类拔取器

座谈一些诙谐的CSS标题(十)–
结构性伪类采纳器

座谈一些妙不可言的CSS标题(十一)–
reset.css知多少

座谈一些有趣的CSS标题(十一)–
reset.css知多少

议论一些妙不可言的CSS标题(十二)– 长远探究CSS 特性检测 @supports 与
Modernizr

探究一些诙谐的CSS标题(十二)– 深刻切磋CSS 性情检测 @supports 与
Modernizr

座谈一些妙趣横生的CSS标题(十三)– 巧妙地创立背景象渐变动画!

探讨一些有意思的CSS标题(十三)– 巧妙地制造背景观渐变动画!

议论一些幽默的CSS标题(十四)–
纯 CSS 格局完毕 CSS
动画的间歇与播音!

座谈一些好玩的CSS题目(十四)–
纯 CSS 格局贯彻 CSS
动画的间歇与广播!

座谈一些好玩的CSS标题(十五)– 谈谈
CSS 关键字 initial、inherit 和
unset

座谈一些妙不可言的CSS标题(十五)– 谈谈
CSS 关键字 initial、inherit 和
unset

议论一些诙谐的CSS标题(十六)– 奇妙的
background-clip:
text

研商一些妙趣横生的CSS标题(十六)– 奇妙的
background-clip:
text

装有毛病汇总在自个儿的 Github 。

拥有题目汇总在自己的 Github 。

本文从那边初叶:

正文从此处早先:

CSS3 新增了2个很有趣的性质
— mix-blend-mode ,其中 mix 和 blend
的国语意译均为混合,那么这本天性的机能直译过来就是混合混合形式,当然,大家大家无独有偶号称错落格局

CSS3 新增了一个很有趣的性格– mix-blend-mode ,其中 mix 和 blend
的国语意译均为混合,那么那些天性的效应直译过来就是混合混合形式,当然,我们我们日常号称错落情势

掺杂形式最广泛于
photoshop 中,是 PS
中拾分无敌的效用之一。当然,瞎用乱用混合形式什么人都会,利用混合格局将多少个图层混合得到1个新的效劳,只是要用到适当,或然说在
CSS
中应用混合形式创设出有个别功用则需求对混合方式很深的知道及不断的尝尝。

混合方式最普遍于
photoshop 中,是 PS
中十一分无敌的职能之一。当然,瞎用乱用混合形式谁都会,利用混合形式将多少个图层混合拿到一个新的功效,只是要用到适合,只怕说在
CSS
中采用混合情势打造出一些意义则需求对混合方式很深的驾驭及不断的品味。

自家个人对混合形式的精通也不行初阶,本文只是带领大家走进
CSS 混合方式的世界,初浅的摸底混合形式及尝试使用它创设一些效应。

本身个人对混合格局的知情也不行先河,本文只是指导我们走进
CSS 混合情势的世界,初浅的问询混合情势及尝试运用它制作一些效果。

 

 

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了成分的情节应该与成分的直系父成分的始末和要素的背景怎么着混合。大家将
PS 中图层的概念替换为 HTML 中的成分。

探访可取的值有怎样:

{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度

  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承
和 unset 还原这 3 个颇具 CSS 属性都得以取的值外,还有其余的 拾陆个实际的取值,对应不一样的犬牙相制效果。

若果不是正规的
PSer
每十一日和交集方式打交道,想要记住这么多效益,仍然挺辛苦的。不过有前人帮大家统计了一番,看看怎么着比较好的敞亮大概说记念那一个效应,摘自Photoshop中高等进阶系列之一——图层混合格局原理:

亚洲必赢官网 15

自然,上图是 PS
中的混合形式,数量比 CSS 中的多出多少个,然而分类仍旧通用的。

 

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了成分的始末应当与成分的深情父成分的内容和因素的背景怎样混合。大家将
PS 中图层的定义替换为 HTML 中的成分。

看看可取的值有怎么着:

{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度

  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承
和 unset 还原那 3 个颇具 CSS 属性都可以取的值外,还有其它的 15个具体的取值,对应不一样的交集效果。

假使不是正规的
PSer
每二三十日和交集情势打交道,想要记住这么多职能,依然挺困苦的。但是有前人帮大家总计了一番,看看如何比较好的精通或然说纪念那一个意义,摘自Photoshop中高等进阶连串之一——图层混合情势原理:

亚洲必赢官网 16

自然,上图是 PS
中的混合方式,数量比 CSS 中的多出多少个,不过分类依然通用的。

 

mix-blend-mode 实例

眼见为实,要会利用 mix-blend-mode ,关键照旧要跨过使用这一步。那里自身写了三个简约的
Demo,包括了独具的因陋就简格局,可以大致试一下种种方式的效益:

CodePen
Demo(-webkit- Only)

当然,仅仅是那样是感受不到混合情势的吸引力的,上面就罗列几个使用了混合方式创设的
CSS 动画。

mix-blend-mode 实例

眼见为实,要会采取 mix-blend-mode ,关键如故要跨过使用这一步。那里自身写了1个大致的
Demo,包罗了富有的混杂形式,可以大概试一下各类方式的意义:

CodePen
Demo(-webkit- Only)

当然,仅仅是这么是感受不到混合格局的魔力的,上边就罗列多少个利用了交集形式创设的
CSS 动画。

 

 

使用 mix-blend-mode: screen 滤色格局创设 loading 效果

为了照顾少数访问
codepen 慢同学,特意制作了该功用的 Gif,看看效果:

亚洲必赢官网 17

CodePen
Demo(-webkit- Only)

此处运用了 mix-blend-mode: screen 滤色格局,这是一种提亮图像形混合形式。滤色的英文是
screen,也等于七个颜色同时投影到贰个显示器上的合成颜色。具体做法是把两个颜色都反相,相乘,然后再反相。简单记念为”让白更白,而黑不变”。(不自然十三分纯粹,如有错误还请指正)

我们将多个div
按照差距延时(animation-delay)小幅度旋转起来,来达到一种很显著很魔性的作用,适合做
loading 图。

使用 mix-blend-mode: screen 滤色形式打造 loading 效果

为了照看少数访问
codepen 慢同学,特意制作了该功用的 Gif,看看效果:

亚洲必赢官网 18

CodePen
Demo(-webkit- Only)

那里运用了 mix-blend-mode: screen 滤色格局,那是一种提亮图像形混合格局。滤色的英文是
screen,相当于七个颜色同时投影到3个屏幕上的合成颜色。具体做法是把七个颜色都反相,相乘,然后再反相。不难纪念为”让白更白,而黑不变”。(不肯定相当准确,如有错误还请指正)

咱俩将七个div
依照不同延时(animation-delay)小幅度旋转起来,来达到一种很强烈很魔性的成效,适合做
loading 图。

 

 

亚洲必赢官网,使用 mix-blend-mode: difference 差值格局

再举个例证, mix-blend-mode: difference 差值形式。查看各类通道中的颜色新闻,相比底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与反动混合将使底色反相;与黄褐混合则不发出变化。

通俗一点就是下边图层的亮区将人世图层的颜色举办反相,暗区则将颜色符合规律显示出来,效果与原图像是完全相反的颜料。

探望利用了这一个混合格局,运用在一些多图层效果里,可以生出极度光彩夺目的混合效果:

亚洲必赢官网 19

CodePen
Demo(-webkit- Only)

上图近似复杂,其实精晓原理之后相当的简约,肆个旋转的 div ,通过 mix-blend-mode: difference 混合在一齐。

使用 mix-blend-mode: difference 差值情势

再举个例证, mix-blend-mode: difference 差值格局。查看各类通道中的颜色音信,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与粉红混合将使底色反相;与暗绛红混合则不发出变化。

深远浅出一点就是下边图层的亮区将人世图层的颜色举行反相,暗区则将颜色不奇怪展现出来,效果与原图像是一点一滴相反的颜色。

看望利用了那个混合方式,运用在有的多图层效果里,可以生出格外花团锦簇的纵横交叉效果:

亚洲必赢官网 20

CodePen
Demo(-webkit- Only)

上图近似复杂,其实精通原理之后相当的简易,四个旋转的 div ,通过 mix-blend-mode: difference 混合在联合。

 

 

使用多交集方式构建文字故障效果

终极,想到自身事先制作的1个文字故障效果,也足以很好的休戚与共混合形式,制作出下列效果:

亚洲必赢官网 21

CodePen
Demo(-webkit- Only)

不用怀疑您的双眼,上图的功效是纯
CSS 完毕的成效,运用了各种颜色混合情势达成颜色叠加,变亮等效能。

本文涉及的正统理论知识很少,没有用很大的篇幅去描述每贰个混合形式的效益及效果。我对混合情势的敞亮也正如浅显,本文意在通过有个别Demo
让读者学会开头去行使这个混合格局作用,俗话说修行在个人,若是真的感兴趣的可以自动深远钻研。

 

选拔多交集情势打造文字故障效果

终极,想到小编前边制作的多少个文字故障效果,也足以很好的玉石俱焚混合方式,制作出下列效果:

亚洲必赢官网 22

CodePen
Demo(-webkit- Only)

不用疑惑您的眼睛,上图的意义是纯
CSS 达成的法力,运用了多样颜色混合方式落成颜色叠加,变亮等作用。

本文涉及的科班理论知识很少,没有用很大的篇幅去描述每三个混合格局的功用及效益。作者对混合格局的知晓也正如通俗,本文意在通过某个Demo
让读者学会初阶去选用这个混合形式作用,俗话说修行在个人,如果真的感兴趣的可以自行深刻钻研。

 

兼容性

末尾,看一眼包容性吧,那种奇怪的质量兼容性凉时都不怎么好,小编事先几篇小说也关系过了,面向今后编程,所以本文的
CodePen Demo 都需求在 -webkit- 内核浏览器下见到:

亚洲必赢官网 23

到此本文截止,若是还有啥疑难如故提出,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

兼容性

最终,看一眼兼容性吧,那种新奇的性质包容性日常都有点好,我以前几篇小说也关乎过了,面向未来编程,所以本文的
CodePen Demo 都务求在 -webkit- 内核浏览器下见到:

亚洲必赢官网 24

到此本文停止,假设还有如何难题照旧提议,可以多多互换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

网站地图xml地图