CSS应用：混合模式
来源：互联网 发布：jdk1.8源码下载 编辑：程序博客网 时间：2024/05/21 10:26
混合模式决定了元素多个背景重叠时，最终显示出的色彩颜色。本质上说，就是将每层背景的颜色通过一定的公式计算出每个像素表现出的最终颜色，CSS3提供了多种混合模式，每种不同的混合模式都提供了不同的计算公式。使用混合可以轻松地制作出许多特殊的效果，下面对CSS中提供的混合模式做一个介绍。
background-blend-mode属性
该属性用于定义元素背景的混合模式。每个背景层的颜色都会与自己之下的背景层以及元素的背景色进行混合，该属性用于定义颜色混合的方式。
background-blend-mode属性的语法如下：
background-blend-mode: <blend-mode>;
blend-mode可以是一个列表，和background-image对应，列表中的第一个元素将被应用到第一层，如果没有足够的值与background-image对应，将重复使用blend-mode值的列表直到有足够的值。
blend-mode的可选值包括：normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。每个值都代表了一种混合模式，对应了一种背景色的混合方法，后面我们将具体讲解。
混合模式介绍
混合模式定义了元素背景颜色的混合方式，混合模式计算的公式如下：
Cm = B(Cb, Cs)
含义如下：
Cm混合后的颜色B混合公式Cb背景颜色Cs参与混合的颜色，即源颜色混合后的颜色值将被限制在颜色值的有效范围内。
如果背景色中使用了透明度，公式则需要做适当的调整。一个完全不透明的背景则是用上面的公式进行计算，而当背景颜色使用了透明度，则公式中需要加入透明度的权重，如下：
Cr = (1 - αb) x Cs + αb x B(Cb, Cs)
含义如下：
Cr混合后的颜色B混合公式Cb背景颜色Cs参与混合的颜色，即源颜色αb参与混合的背景的透明度上面的公式是混合模式的统一公式，其中的公式B由每种混合模式来决定，即公式B的定义和blend-mode的值是相对应的，下面我们详细介绍CSS中的每种混合模式对应的公式B，以及达到的效果。
所有的例子都是在以下背景的基础上运用混合模式。
width: 320px;
height: 320px;
background:
radial-gradient( #3893ec 105px, transparent 105px, transparent) 0px -52px no-repeat,
radial-gradient( #ec3839 105px, transparent 105px, transparent) -52px 52px no-repeat,
radial-gradient( #eceb38 105px, transparent 105px, transparent) 52px 52px no-repeat;
normal混合模式
这个是默认值。计算的结果为选择源颜色。
B(Cb, Cs) = Cs
background-blend-mode: normal;
效果和不设置混合模式的效果是一样的。
multiply混合模式
计算的结果是背景颜色和源颜色的乘积，通常会导致颜色变暗。
任何颜色同黑色相乘都是黑色（黑色为RGB(0, 0, 0)）；任何颜色同白色相乘都是原始颜色（白色为RGB(255,255,255)）。
B(Cb, Cs) = Cb x Cs
background-blend-mode: multiply;
结果颜色的值是将两种颜色的颜色值相乘，但注意是基于小数的，具体算法如下：
假定Cb为RGB(r1,g1,b1)，Cs为RGB(r2,g2,b2)，则：
B(Cb, Cs) = Cb x Cs = RGB(r1 * r2 / 255, g1 * g2 / 255, b1 * b2 /255)
很容易看出结果颜色将比背景颜色或源颜色更暗（RGB的值越小越接近黑色，就越暗）。
注意：以下所有的混合模式的计算都是基于该种方式的。
screen混合模式
将背景颜色和源颜色的值的补相乘，再将结果取补。
计算的结果总是至少同两种原始颜色中的任意一种异样亮。任何颜色同白色使用screen将产生白色；任何颜色同黑色使用screen将保持不变。其效果类似于同时将多个摄影幻灯片投影到一个屏幕上。
B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)] = Cb + Cs -(Cb x Cs)
background-blend-mode: screen;
overlay混合模式
根据背景色的值，使用multiply或者screen混合颜色。
源颜色叠加到背景，同时保留背景的高亮和阴影。背景色不被替换而是和源颜色混合以反映背景的亮与暗。
B(Cb, Cs) = HardLight(Cs, Cb)
overlay混合模式是hard-light混合模式的取反，可以在hard-light混合模式查看HardLight公式的定义。
background-blend-mode: overlay;
darken混合模式
选择背景和源颜色中更黑的颜色。
背景色使用背景和源中更黑的颜色替换。
B(Cb, Cs) = min(Cb, Cs)
background-blend-mode: darken;
lighten混合模式
选择背景和源颜色中更亮的颜色。
背景色使用背景和源中更亮的颜色替换。
B(Cb, Cs) = max(Cb, Cs)
background-blend-mode: lighten;
color-dodge混合模式
使背景色变亮以反映源颜色。与黑色混合将无变化。
if(Cb == 0)
B(Cb, Cs) = 0
else if(Cs == 1)
B(Cb, Cs) = 1
else
B(Cb, Cs) = min(1, Cb / (1 - Cs))
background-blend-mode: color-dodge;
color-burn混合模式
使背景色变暗以反映源颜色。与白色混合将无变化。
if(Cb == 1)
B(Cb, Cs) = 1
else if(Cs == 0)
B(Cb, Cs) = 0
else
B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)
background-blend-mode: color-burn;
hard-light混合模式
根据源颜色，multiply或者screen颜色。效果同将一个强光照射到背景上类似。
if(Cs <= 0.5)
B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
看multiply混合模式和screen混合模式的计算公式。
background-blend-mode: hard-light;
soft-light混合模式
根据源颜色值，将颜色变黑或者变亮。效果类似于将发散的聚光灯照射到背景上。
if(Cs <= 0.5)
B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
else
B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
同时：
if(Cb <= 0.25)
D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
else
D(Cb) = sqrt(Cb)
background-blend-mode: soft-light;
difference混合模式
用背景色和源颜色中更亮的颜色减去更暗的颜色。
与白色混合相当于将颜色反转，与黑色混合无变化。
B(Cb, Cs) = | Cb - Cs |
background-blend-mode: difference;
exclusion混合模式
产生和difference模式类似的效果，但程度更低。
与白色混合相当于将颜色反转，与黑色混合无变化。
B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs
background-blend-mode: exclusion;
hue混合模式
使用源颜色的色调和背景色的饱和度和亮度创建结果颜色。
B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))
其中用到的公式的定义如下：
Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue
ClipColor(C)
L = Lum(C)
n = min(Cred, Cgreen, Cblue)
x = max(Cred, Cgreen, Cblue)
if(n < 0)
C = L + (((C - L) * L) / (L - n))
if(x > 1)
C = L + (((C - L) * (1 - L)) / (x - L))
return C
SetLum(C, l)
d = l - Lum(C)
Cred = Cred + d
Cgreen = Cgreen + d
Cblue = Cblue + d
return ClipColor(C)
Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)
SetSat(C, s)
if(Cmax > Cmin)
Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
Cmax = s
else
Cmid = Cmax = 0
Cmin = 0
return C;
background-blend-mode: hue;
saturation混合模式
使用源颜色的饱和度和背景色的色调和亮度创建结果颜色。与纯灰色（无饱和度）的色彩混合将无变化。
B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))
其中用到的公式的定义同hue混合模式。
background-blend-mode: saturation;
color混合模式
使用源颜色的色调和饱和度以及背景色的亮度创建结果颜色。
B(Cb, Cs) = SetLum(Cs, Lum(Cb))
其中用到的公式的定义同hue混合模式。
background-blend-mode: color;
luminosity混合模式
使用源颜色的亮度和背景色的色调和饱和度创建结果颜色。
B(Cb, Cs) = SetLum(Cb, Lum(Cs))
其中用到的公式的定义同hue混合模式。
background-blend-mode: luminosity;
混合模式实例
下运用混合模式可以创造出丰富多彩的效果，下面我们来看几个实例。
multiply混合模式运用
background:
repeating-radial-gradient(circle, transparent, transparent 3.5em, tomato 3.5em, tomato 4.5em),
repeating-radial-gradient(circle, transparent, transparent 3.5em, dodgerblue 3.5em, dodgerblue 4.5em),
repeating-radial-gradient(circle, transparent, transparent 2.5em, gold 2.5em, gold 2.75em),
floralwhite;
background-size: 10em 10em;
background-blend-mode: multiply;
background-position:0 0, 5em 5em, 10em 5em;
difference混合模式运用
background:
repeating-radial-gradient(circle at top left, red, red 4em, transparent 4em, transparent 15em),
repeating-radial-gradient(circle at top right,lime,lime 4em,transparent 4em,transparent 15em),
repeating-radial-gradient(circle at bottom right,yellow,yellow 4em,transparent 4em,transparent 15em),
repeating-radial-gradient(circle at bottom left,blue,blue 4em,transparent 4em,transparent 15em),
white;
background-blend-mode: difference;
如果你对混合模式感兴趣，可以继续关注我后续的CSS绘图系列。
- CSS应用：混合模式
- CSS混合模式
- css 属性选择器学习+css3 混合模式+css background
- Hybrid App（混合模式移动应用）
- Hybrid App（混合模式移动应用）
- Hybrid App 混合模式移动应用
- 混合模式
- Hybird App ( 混合模式移动应用)开发初体验
- Hybrid App——混合模式移动应用
- Hybrid App（混合模式移动应用）开发工具
- 传智播客参加中国计算机学会混合教学模式应用研讨会
- AppCan：基于混合模式的移动应用开发
- cocos2dx混合模式应用-制作新手引导高亮区域
- 【HTML&CSS】混合布局
- CSS 混合布局
- css+div网页设计（三）--与多种技术的混合应用
- 手机APP模式 之 Hybrid App（混合模式移动应用）
- 15种CSS混合模式让图片产生令人惊艳的效果
- 傅里叶变换 By ZZP&ZZL
- CUMT OJ 1012 漫长的旅程===走台阶问题
- SICP 练习2.12 make-interval-percent
- C#基础知识（二）——字符与类型转换
- 数据库多张表删除操作
- CSS应用：混合模式
- 跟我学习php文件和目录常用函数-上篇
- UEditor之图片上传如何和真实项目结合
- Java中动态数组的理解
- 随机数代码
- C4.5算法详解（非常仔细）
- 【Android】数据存储之文件存储
- pandas选取特定索引的行
- Eclipse,MyEclipse增强html代码提示功能
