转载

CSS Blend Modes(Part1)

在现代浏览器中可以使用 mix-blend-mode 和 background-blend-mode 属性实现Photoshop中的图层的混合模式。属性值有 lighten 、 multiply 和 hard-light 等，这些属性在CSS中运用效果和Adobe Photoshop效果完全一样。即使每天都在Photoshop中使用它们，但了解混合模式的人相对较少。在这篇文章中，我将介绍基本的混合模式是什么，它们是如何工作的？

CSS的混合模式是一个新属性，目前在最新版本的Chrome、Firefox、Safari和Opera浏览器得到较好的支持。在Adobe应用程序和CSS中元素都可以合并，并且效果一致。只不过在Photoshop是多个图层合并，而在CSS中是多个元素合并。混合模式的默认值 normal 。

不是所有的Photoshop混合模式都在CSS得到应用。目前在CSS中得到支持的属性有 multiply 、 screen 、 overlay 、 darken 、 lighten 、 color-dodge 、 color-burn 、 hard-light 、 soft-light 、 difference 和 exclusion 。

Photoshop Blend Modes

CSS中的混合模式

Photoshop混合模式我们不做地多阐述，接下来通地实例来演示CSS中的混合模式效果。假设我们有这样的一个模板：

HTML

<div></div> ... <div></div>

CSS

body {   background-color: darken(orange, 30%); } div{   width: 200px;   height: 150px;   margin: 10px;   text-align: center;   font-size: 1.5em;   line-height: 150px;   display: inline-block;   color: #ccc;   text-shadow: 1px 1px 1px rgba(0,0,0,.3);   background-color: #66a; }

效果

`mix-blend-mode` 效果

接下来先看看CSS中 mix-blend-mode 采用不同混合模式值所产生的效果：

$css-blend-modes: normal, multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion;

声明一个Sass的 $list ，对应的值为CSS混合模式的值。通过 @for 循环给对应的 div 设置对应的值：

@for $i from 1 through length($css-blend-modes){     &:nth-child(#{$i}){         mix-blend-mode: nth($css-blend-modes, $i);     } }

除了将 mix-blend-mode 运用在普通的元素之上，还可以运用在 img 标签元素， img 将会产生不同一样的效果。假设有一张这样的图片：

CSS Blend Modes(Part1)

演示效果如下：

`background-blend-mode`

令人更兴奋的是在多背景图片的合成上。

混合模式

正如你所知道的，CSS3支持多背景，第一个背景是在最顶层，接下来的依次在其下面。

CSS Blend Modes(Part1)

假设顶部的背景足够大，那么底下的基色永远看不看到。这仅提供作为后备，仅此而已。

在混合层设置 luminosity 模式，将在不改变色相和饱和度前提下修改基层与背景图像的亮度。如果基层颜色和一背景图片混合在一起，结果图片将会是一个单色图片，照片的颜色也将替换。

以前实现这样的效果，通常是使用 CSS3的 filter 属性。比如 2014年CSSConf大会官网讲师头像效果，用的就是 filter 。

CSS Blend Modes(Part1)

运用在 img 上的样式：

[id=speakers] .h-card:not(:hover) img {     -webkit-filter: grayscale(100%) sepia() hue-rotate(105deg) brightness(90%) saturate(110%) contrast(140%); }

传统上实现 color-cast 图片效果都是通过Photoshop来制作，而悬浮效果通过JavaScript来实现。不过Lea Verou制作的CSSConf网站采用一系列复杂的过滤器实现。实际上，这已经是最好的实现方法了，不过Lea Verou提供了一个更好的方案：

background: hsl(335, 100%, 50%) url("http://www.w3cplus.com/sites/default/files/blogs/2015/1506/css-blend-mode-4.jpg") no-repeat center; background-size: cover; background-blend-mode: luminosity;

通常选择一个合适的基本层和混合图像，可以创建各种各样的混合效果。同时 filter 多个属性值结合可以模拟出类似于 background-blend-mode 的效果。

在使用 background-blend-mode 有几个注意的事项需要注意：

到目前为止，微软并没有给出任何的提示，它将会支持CSS的混合模式（值得考虑的是使用 <canvas> 来替代）
background-blend-mode 只能应用于背景
background-blend-mode 只能在现代浏览器上得到支持。在旧版本浏览器可以采用Lea Verou提供的 filter 方案
在Firefox浏览器，可以采用 <svg> 来实现等同效果

使用 background-blend-mode 时，你需要注意的几件事：

background-blend-mode 默认值是 normal 而不是 none
混合模式不能设置动画效果，但是您可以通过 transition 来修改基本颜色为 transparent 来模拟
如果基本颜色为 white 或 black 时， background-blend-mode:luminosity; 将会让混合层变成 greyscale 。

混合模式中的动画效果

前面也提过， background-blend-mode 是没有动画效果。或许你也知道，CSS背景属性能够设置动画效果的属性仅仅只有少数的几个： background-position 、 background-size 和 background-color 。可以修改这些属性值，实现动画效果。

正如下面的示例，在 div:hover 状态修改 background-position 值，实现一个动画效果。

div{   width: 100vw;   height: 100vh;   position: relative;   padding-top: 45%;   background: url(http://www.w3cplus.com/sites/default/files/blogs/2015/1506/runner-long-distance.jpg),linear-gradient(90deg,#fff 50%,#000 50.5%);   background-size: cover,20% 100%;   background-blend-mode: difference;   transition: 2s;   background-position: -350px 0px,0px top;   background-repeat: no-repeat,repeat-x;    &:hover{     background-position: -2000px 0px,300px top;   } }

总结

这篇文章主要简单介绍了CSS混合模式的基础知识以及如何在页面中使用CSS混合模式的 mix-blend-mode 和 background-blend-mode 。并且通过示例直观向大家展示各个属性产生的效果。在接下来的第二部分，将向大家展示，CSS混合模式其他几个使用场景。如果您感兴趣，欢迎关注后续的更新。

大漠

常用昵称“大漠”，W3CPlus, Sass中国创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

正文到此结束