神奇的 CSS3 混合模式

作者：冴羽

http://zzfe.org/#/detail/5b8e6d96fbdffc237aa6d1fc

对于前端开发人员应该都很熟悉Photoshop的图层混合模式，就是几个图层按不同的模式进行混合，实现不同的图像效果。但是当我们前端同学在切这些效果图的时候，基本上就是一刀切的，即使是文字，当字体很炫的话，我们也不得不用切图来替代。实际上在16年CSS3就新增了一个很有意思的属性 -- mix-blend-mode，我们称之为混合模式，它类同于ps的混合模式，也就是说在CSS中我们也可以利用混合模式制作出一些效果。

先引出一个小例子，我们来看下css3混合模式到底可以实现一个什么样的效果

有这样一个需求，当文本跨越一个与自身颜色相似的区域时，怎么实现颜色反转？

按照上面的做法，效果是这样的，“HELLO”的右半部分是完全不可见的

那么要想实现右半部分可见且字体显示白色，我们以往的做法无非就两种：

把文字变成图片

写一大堆css实现，总之css应该是能实现的 但是有了css3的混合模式，我们可以直接将文本的颜色翻转到黑色背景中，两行css代码就搞定了。

是不是很强大，很easy的就实现了我们的需求。那么在上面的例子中用到了mix-blend-mode: difference;混合模式的差值模式，到底css3有几种与混合模式相关的属性，取值又都有哪些，我们先看一下基础概念，再举一些基础应用的例子。

CSS3 mix-blend-mode 和 background-blend-mode

本节主要讲下css3混合模式的mix-blend-mode和background-blend-mode两个属性，两个属性的取值是一样的，不一样的是：

mix-blend-model属性用来定义元素与背景的混合模式，可以是元素与背景图片的混合，也可以是元素与背景色的混合

background-blend-mode属性用来定义背景的混合模式，可以是背景图片与背景图片的混合，也可以是背景图片和背景色的混合

引题的小例子就是用的mix-blend-mode属性，实现的是文本和背景图的混合。下面介绍一下混合模式的取值情况，我们首先学习3个术语：基色，混合色和结果色。

基色：指当前图层之下的图层颜色。

混合色：指当前图层的颜色。

结果色：指混合后得到的颜色。

这些api是不是看着头大，我也是看了前几个还行，后面就晕了，那不妨给他们归归类

归类后更清晰一些，知道哪些取值大概可以实现什么效果了，好了，理论说这么多，我们还是来具体看看这些混合模式到底可以制作出来什么样的炫酷效果吧~

效果展示

* 各种文字效果

我们可以用mix-blend-mod制作出混合文字和文字背景图，之前做页面碰到混合文字类的，因为重叠部分显示颜色的问题，我们往往是把文字切出来一个图片实现的，现在用css3的混合模式可以轻易实现了；文字背景图也很简单，我们只需要构造出黑色文字，白色底色的文字div ，叠加上图片，再运用 mix-blend-mode即可。 核心代码如下，简单看一下：

我们发现在混合文字的例子中，用到了isolation: isolate这个css3属性，这个属性正如其语义，就是隔离的意思，那隔离什么呢？是用来隔离mix-blend-mode元素的混合的。当元素应用了混合模式的时候，默认情况下，其会混合所有层叠顺序比其低的层叠元素。像文字混合的例子中，我们不用隔离属性的话，文字颜色还会混合白色背景，“words”显示的就不是绿色了，但是，我们就希望混合模式只用到某一个元素，不向下渗透了的话，isolation: isolate就派上用场了，它会阻断混合模式的进行，允许使一组元素从它们后面的背景中独立出来，只混合这组元素。大家有兴趣的话可以研究下这个属性。

* hover改变图标的颜色

之前我们想hover改变一个icon的颜色，基本上也是切出来两个图，原始的一个，hover后加颜色的一个来回切换的，实际上我们这样的交互应用还挺多，像“收藏”按钮、着重提示按钮等，但是有了css3混合模式，还是那句话，两行代码统统搞定这些效果，不管是渐变、纯色皆可以，下面看下渐变色hover的效果图：

* 动画

总结

大概介绍到这里，实际上即使已知每种混合模式的定义，也很难预测如何应用某种混合模式会影响混合元素，所以选择混合模式通常是一个反复试验的过程，但是在实验的过程中我们用纯CSS，几行代码就能实现了这些很炫的效果，是不是很奇妙。感兴趣的同学可以用这些属性做些小动画，小游戏也是极好的。 但这么炫的属性，用的都不是很多，很大原因也是因为兼容性的问题，我们来看一下兼容情况：

可以看到兼容性不是很好，所以用的时候，最好判断一下浏览器的兼容性，推荐两种方法，以上面引题的例子做说明

一种是用js判断兼容性

另一种是直接用CSS中的@supports

到这就介绍完了，实际上类似于混合模式的css3有意思的属性还很多，有兴趣的话我们可以一块探讨交流下~

【关于投稿】

如果大家有原创好文投稿，请直接给公号发送留言。

① 留言格式：

【投稿】+《 文章标题》+ 文章链接

② 示例：

【投稿】《不要自称是程序员，我十多年的 IT 职场总结》：http://blog.jobbole.com/94148/

③ 最后请附上您的个人简介哈~

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能