Compose 和 Blend(二)_html/css_WEB-ITnose
什么是 Blend(混合)
我的理解 blend 是 compose 中的一步,上篇文章中我已讲到了 compose 的一些方法,但是 blend 是将两张图的颜色混合在一起。
最典型的例子就是三原色,我们可以把红、蓝、绿三个球想象成三个图层,黄、青、洋红就是这三个图层 blend 之后的结果。
Photoshop 里的混合模式就是 blend ,这个功能用过 Photoshop 的人应该都很熟悉了。
CSS 中的 Blend
CSS 中 blend 的标准最起初是由 Adobe 公司提出的草案。
CSS 里有 isolation , mix-blend-mode 和 background-blend-mode 三个属性来控制混合的方式。
-
mix-blend-mode 指定一个元素将如何与它「下面」的元素混合
-
background-blend-mode 指定 background-image 如何与 background-color 混合
-
isolation 指定一个元素不参与混合
下面的网站用 css blend 实现了很多复杂的图形,其中一个背景的 css 代码也不过就十几行,比加载一张图片体积小了很多。
http://bennettfeely.com/gradients/
Blend 各种模式的计算方式
blend 属性有很多值,比如 darken , overlay , color-dodge 。其中使用量最多的就是 multiply 正片叠低 ,「正片叠底」这个词很多设计师应该都知道,但是明白它到底是做什么的就不多了。
那么现在我们就来讲一下各种混合模式的计算方式。
Cs = source color = 前景颜色
Cb = backdrop color = 背景颜色
B(Cb, Cs) = 混合模式
Cs、Cb 为一个 1*3 的矩阵 [R, G, B]矩阵中每个元素的取值范围为 0 ~ 1
normal
B(Cb, Cs) = Cs
normal 方式其实和 compose 中的 source over 行为一样,也是我们一般图片叠加的方法。
multiply
B(Cb, Cs) = Cb x Cs
通过公式我们可以看出混合后的结果比前景和背景都要暗。并且前景和背景中的白色都会被剔除掉。
screen
B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)] = Cb + Cs -(Cb x Cs)
screen 感觉和 multiply 作用正好相反,生成的结果比背景、前景都要亮。
hard-light
if(Cs
overlay
B(Cb, Cs) = HardLight(Cs, Cb)把 hard-light 中背景和前景颠倒过来就是 overlay
darken
B(Cb, Cs) = min(Cb, Cs)选择背景、前景中最暗的像素
lighten
B(Cb, Cs) = max(Cb, Cs)选择背景、前景中最亮的像素
color-dodge
if(Cb == 0) B(Cb, Cs) = 0else if(Cs == 1) B(Cb, Cs) = 1else B(Cb, Cs) = min(1, Cb / (1 - Cs))
color-burn
if(Cb == 1) B(Cb, Cs) = 1else if(Cs == 0) B(Cb, Cs) = 0else B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)
hard-light
if(Cs
soft-light
if(Cs
difference
B(Cb, Cs) = | Cb - Cs |
exclusion
B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs
参考资料
Compositing and Blending Level 1
上一篇: Oracle与平台位数不匹配的错误
推荐阅读
-
一张图看懂css的position里的relative和absolute的区别_html/css_WEB-ITnose
-
CSS控制前台样式在360和chrome的兼容问题,跪求高手帮忙,在线等,,,,,,,_html/css_WEB-ITnose
-
9种CSS3 blend模式制作的鼠标滑过图片标题特效_html/css_WEB-ITnose
-
CSS3和SVG炫酷鼠标点击按钮效果_html/css_WEB-ITnose
-
jQuery和CSS3堆叠卡片样式导航菜单特效_html/css_WEB-ITnose
-
为何页面内容和网页边缘有空隙_html/css_WEB-ITnose
-
css设置背景图片和背景颜色都不显示_html/css_WEB-ITnose
-
html表单验证证件类型和证件号码匹配,并验证问题_html/css_WEB-ITnose
-
JavaScript学习笔记:取数组中最大值和最小值_html/css_WEB-ITnose
-
请问如何实现table的外框和内框线的粗度不同??_html/css_WEB-ITnose