CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式

混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

我个人对混合模式的理解也十分浅显,本文只是带领大家走进 CSS 混合模式的世界,初浅的了解混合模式及尝试使用它制作一些效果。

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS 中图层的概念替换为 HTML 中的元素。

看看可取的值有哪些:

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 属性都可以取的值外,还有另外的 16 个具体的取值,对应不同的混合效果。

如果不是专业的 PSer 天天和混合模式打交道,想要记住这么多效果,还是挺困难的。不过有前人帮我们总结了一番,看看如何比较好的理解或者说记忆这些效果,摘自Photoshop中高级进阶系列之一——图层混合模式原理

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

mix-blend-mode 实例

眼见为实,要会使用 mix-blend-mode ,关键还是要迈出使用这一步。这里我写了一个简单的 Demo,包括了所有的混合模式,可以大概试一下各个模式的效果:

CodePen Demo(-webkit- Only)

当然,仅仅是这样是感受不到混合模式的魅力的,下面就列举几个利用了混合模式制作的 CSS 动画。

使用 mix-blend-mode: screen 滤色模式制作 loading 效果

为了照顾某些访问 codepen 慢同学,特意制作了该效果的 Gif,看看效果:

CodePen Demo(-webkit- Only)

这里使用了 mix-blend-mode: screen 滤色模式,这是一种提亮图像形混合模式。滤色的英文是 screen,也就是两个颜色同时投影到一个屏幕上的合成颜色。具体做法是把两个颜色都反相,相乘,然后再反相。简单记忆为"让白更白,而黑不变"。(不一定十分准确,如有错误还请指正)

我们将三个 div 按照不同延时(animation-delay)小幅度旋转起来,来达到一种很显眼很魔性的效果,适合做 loading 图。

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

再举个例子, mix-blend-mode: difference 差值模式。查看每个通道中的颜色信息,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相;与黑色混合则不产生变化。

通俗一点就是上方图层的亮区将下方图层的颜色进行反相,暗区则将颜色正常显示出来,效果与原图像是完全相反的颜色。

看看利用了这个混合模式,运用在一些多图层效果里,可以产生十分绚烂的混合效果:

CodePen Demo(-webkit- Only)

上图看似复杂,其实了解原理之后非常的简单,6 个旋转的 div ,通过 mix-blend-mode: difference 混合在一起。

使用多混合模式制作文字故障效果

最后,想到我之前制作的一个文字故障效果,也可以很好的融合混合模式,制作出下列效果:

CodePen Demo(-webkit- Only)

不用怀疑你的眼睛,上图的效果是纯 CSS 实现的效果,运用了多种颜色混合模式实现颜色叠加,变亮等效果。

本文涉及的专业理论知识很少,没有用很大的篇幅去描述每一个混合模式的效果及作用。我对混合模式的理解也比较粗浅,本文旨在通过一些 Demo 让读者学会开始去使用这些混合模式效果,俗话说修行在个人,如果真的感兴趣的可以自行深入研究。

兼容性

最后,看一眼兼容性吧,这种奇妙的属性兼容性通常都不怎么好,我之前几篇文章也提到过了,面向未来编程,所以本文的 CodePen Demo 都要求在 -webkit- 内核浏览器下观看:

到此本文结束,如果还有什么疑问或者建议,可以多多交流

css 颜色混合模式 mix-blend-mode的更多相关文章

  1. 经典CSS颜色混合模式

    转自:http://www.webhek.com/css-blend-mode/ 注意:只有使用最新版的谷歌浏览器.火狐浏览器,才能正确的显示本文中的演示. Photoshop里最没有用处的一种功能— ...

  2. 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 不可思议的颜色混合模式 mix-blend-mode (转)

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 深入理解CSS六种颜色模式

    前面的话 赏心悦目的颜色搭配让人感到舒服,修改元素颜色的功能让人趋之若鹜.但颜色规划不当,会让网站用户无所适从.颜色从<font color="">发展至今,保留了很多 ...

  5. HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...

  6. immutable-styles 新的css style 开发模式

    immutable-styles 是一个开源的library,可以方便我们开发强壮以及可预测的web 界面,不用担心其他css 的影响 特性 编译时错误提示 防止css 覆盖 分离破坏点 严格继承 重 ...

  7. css position 定位模式

     定位 定位模式: static relative absolute fixed 边偏移 :top bottom left right 一般的定位必须要有定位模式以及边偏移 static 静态定位 默 ...

  8. 常用CSS颜色表

    1.16进制的CSS颜色代码 > http://www.jsjtt.com/webkaifa/HTML/65.html

  9. CSS奇思妙想 -- 使用 background 创造各种美妙的背景

    本文属于 CSS 绘图技巧其中一篇,系列文章: 在 CSS 中使用三角函数绘制曲线图形及展示动画 CSS奇思妙想 -- 使用 CSS 创造艺术 将介绍一些利用 CSS 中的 background.mi ...

随机推荐

  1. 【CSS】知识笔记

    一.CSS文件 1.引用css文件,放在Head里面,可以减少repaint和reflow. 浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有C ...

  2. UOJ449. 【集训队作业2018】喂鸽子 [概率期望,min-max容斥,生成函数]

    UOJ 思路 由于最近养成的不写代码的习惯(其实就是懒),以下式子不保证正确性. 上来我们先甩一个min-max容斥.由于每只鸽子是一样的,这只贡献了\(O(n)\)的复杂度. 现在的问题转化为对于\ ...

  3. 部署Django到云服务器(centos+nginx+mysql+uwsgi+python3)【操作篇(1)】

    开篇 笛卡尔说:"你不能教会一个人任何东西,你只能帮助他发现他自己内心本来就有的东西!" jacky能教你的,只能是经验和建议,要逆袭还得通过自己对数据的不断领悟,数据领域的技能都 ...

  4. 浅谈sharding jdbc

    定位为轻量级Java框架,在Java的JDBC层提供的额外服务. 它使用客户端直连数据库,以jar包形式提供服务,无需额外部署和依赖,可理解为增强版的JDBC驱动,完全兼容JDBC和各种ORM框架. ...

  5. svn部署-linux

    Svn作用 Subversion是一个自由/开源的版本控制系统,一组文件存放在中心版本库,记录每一次文件和目录的修改,Subversion允许把数据恢复到早期版本,或是检查数据修改的历史,Subver ...

  6. 7、vueJs基础知识07

    UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁.大方 官网文档https://www.bootcss.com/ ...

  7. mac编译Cpython

    源代码中有什么? CPython 源代码分发包含各种工具,库和组件.我们将在本文中探讨这些内容. 首先,我们将重点关注编译器.先从 git 上下载 Cpython 源代码. git clone htt ...

  8. CSS显示模式

    div和span标签 1.容器级的标签中可以嵌套其他所有的标签(div->一般用于配合CSS完成网页的基本布局.h.ul.ol.dl.li.dt.dd......),文本级的标签中只能嵌套文字/ ...

  9. Visual C++2010的使用

    Tools->Settings>Rest... 还原所有设置 运行程序:"D:\Program Files\VCExpress\Install\Microsoft Visual ...

  10. python 获取自己exe位置 sys.executable sys.prefix

    exe路径 >>> sys.executable 'C:\\Python27\\python.exe' 1 2 lib路径 >>> sys.prefix 'C:\\ ...