难以想象的混合模式 background-blend-mode

本文接前文：难以想象的混合模式 mix-blend-mode 。因为 mix-blend-mode 这个属性的强大，不少应用场景和动效的制做不断完善和被发掘出来，遂另起一文继续介绍一些使用 mix-blend-mode 制做的酷炫动画。

CSS3 新增了一个颇有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的做用直译过来就是混合混合模式，固然，咱们咱们一般称之为混合模式。

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

 

mix-blend-mode 简介

关于 mix-blend-mode 最基本的用法和描述，能够简单看看上篇文章 难以想象的混合模式 mix-blend-mode。

 

background-blend-mode 简介

除了 mix-blend-mode ，CSS 还提供一个 background-blend-mode 。也就是背景的混合模式。

• 能够是背景图片与背景图片的混合，
• 也能够是背景图片和背景色的之间的混合。

background-blend-mode 的可用取值与 mix-blend-mode同样，不重复介绍，下面直接进入应用阶段。

 

background-blend-mode 基础应用

对于 background-blend-mode ，最简单的应用就是将两个或者多个图片利用混合模式叠加在一块儿。假设咱们存在下述两张图片，能够利用背景混合模式 background-blend-mode 叠加在一块儿：

通过背景混合模式 background-blend-mode:lighten 处理以后：

CodePen Demo -- image mix by bg-blend-mode

固然，这里使用的是 background-blend-mode:lighten 变亮这个混合模式，核心代码以下：

<div class="container"></div>

.container {
    background: url($pic1), url($pic2);
    background-size: cover;
    background-blend-mode: lighten;
}

咱们能够尝试其余的组合，也就是改变 background-blend-mode 的各类取值，将会获得各类不一样的感官效果。

 

使用 background-blend-mode: difference 制做黑白反向动画

黑色白色这两种颜色，无疑是使用频率最高也是我认为最搭的两个颜色。当这两种颜色结合在一块儿，老是能碰撞出不同的火花。

扯远了，借助 difference 差值混合模式，配合黑白 GIF，能产生奇妙的效果，假设咱们拥有这样一张 GIF 图（图片来自网络，侵删）：

利用 background-blend-mode: difference ，将它叠加到不一样的黑白背景之下（黑白背景由 CSS 画出来）：

产生的效果以下：

咱们能够尝试其余的组合，将会获得各类不一样的感官效果。

 

使用 background-blend-mode 制做 hover 效果

想象一下，在上面第一个例子中，若是背景的黑白蒙层不是一开始就叠加在 GIF 图下，而是经过某些交互手段叠加上去。

应用这种方式，咱们可使用 background-blend-mode 来制做点击或者 hover 时候的蒙板效果。

假设咱们有这样一张原图（黑白效果较好）：

经过混合渐变背景色，配合 Hover 效果，咱们能够给这些图配上一些咱们想要的色彩：

代码很是简单，示意以下：

.pic {
    background: url($img),
        linear-gradient(#f00, #00f);
    background-size: cover, 100% 100%;
    background-position: 0 0, -300px 0;
    background-blend-mode: luminosity;
    background-repeat: no-repeat;
    transition: .5s background-position linear;
}

.pic:hover { 
    background-position: 0 0, 0 0; 
}

这里有几点须要注意的：

• 这里使用了背景色渐变更画，背景色的渐变更画有几种方式实现（戳这里了解更多方法），这里使用的是位移 background-position
• 实现上述效果使用的 background-blend-mode 不限制具体某一种混合模式，能够本身多尝试

 

使用 mix-blend-mode || background-blend-mode 改变图标的颜色

若是再运用上一篇文章介绍的知识 两行 CSS 代码实现图片任意颜色赋色技术 ，咱们能够实现 ICON 的颜色的动态改变。

假设咱们有这样一张 ICON 图，注意主色是黑色，底色的白色（底色不是透明色），因此符合要求的 JPG、PNG、GIF 图均可以：

利用 background-blend-mode: lighten 能够实现动态改变图标主色的效果：

并且这里的具体颜色（渐变、纯色皆可），动画方向均可以能够随意控制的。

又或者是这种 hover fadeIn 效果：

 

使用 mix-blend-mode 制做文字背景图

咱们将上面 ICON 这个场景延伸一下，ICON 图能够延伸为任意黑色主色白色底色图片，而颜色则能够是纯色、渐变色、或者是图片。

那么咱们能够尝试让文字带上渐变色，或者说让文字透出图片。固然这个效果有一些 CSS 属性也能够完成。

譬如 background-clip: text 背景裁剪就可让文字带上渐变色或者展现图片，能够戳这里看看 使用 background-clip 实现文字渐变。

这里咱们使用 mix-blend-mode 也可以轻易实现，咱们只须要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode 便可，简单原理以下：

核心代码以下，能够看看：

<div class="container">
    <div class="pic"></div>
    <div class="text">IMAGE</div>
</div>

.pic {
    position: relative;
    width: 100%;
    height: 100%;
    background: url($img);
    background-repeat: no-repeat;
    background-size: cover;
}

.text {
    position: absolute;
    width:100%;
    height:100%;
    color: #000;
    mix-blend-mode: lighten;
    background-color: #fff;
}

最后

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

好了，本文到此结束，但愿对你有帮助 :)

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。