15种CSS混合模式让图片产生令人惊艳的效果

川长思鸟来 2021-12-23 03:57 935阅读 0赞

如果你曾经广泛地使用过图片编辑应用软件（例如，Adobe Photoshop，Pixelmator，GIMP等），那么你可能对混合模式比较熟悉。如同名称中所暗示的，混合模式是指将上层的图像融入下层图像时采用的各种模式。根据您所选择的模式，你会看到不同的融合后的效果。

混合模式采取铺设在彼此顶部的两个像素，并结合他们不同的方式进行展现，例如较深的颜色混合模式只会呈现两个像素的颜色较深。 在扩展到整个图像时，混合模式可以产生一些令人惊艳的效果。

![15种CSS混合模式让图片产生令人惊艳的效果][15_CSS]

CSS混合模式提供了一种用于规定层与层之间如何相互影响及混合的方法。原来属于图片编辑应用软件领域的一些效果实现，现在也可以可以通过[CSS混合模式][CSS]在web中实现！

当然，对前端非常感兴趣的朋友还可以看看这些：

>  *  [30个配色方案十分精彩的网站设计作品欣赏][30]
>  *  [2014年前端开发非常实用的15个HTML&CSS框架][2014_15_HTML_CSS]
>  *  [分享40个构建良好用户界面所需的人性化解决方案][40]
>  *  [分享30个令你惊喜的视差滚动（Parallax Scrolling）效果网站][30_Parallax Scrolling]

## 浏览器支持 ##

按照现在情况来讲, [浏览器支持][Link 1] CSS`background-blend-mode`属性还在不断的完善中。早期版本的浏览器目前还不支持，但[caniuse.com][]报告说在Chrome，Firefox和Opera的最新版本都有良好的支持，使用Safari最快。

目前，基于Chromium的浏览器对CSS混和模式最为支持（`background-blend-mode`和`mix-blend-mode`都支持）。为了使Opera也支持，需要在opera地址栏中打开`opera:flags`，然后开启`Enable experimental Web Platform features`一项。对于Chrome，你需要通过`chrome://flags`开启同样的项目。

火狐现在不支持`isolation`属性，但你可以先享用其它属性，你需要打开`about:config`，然后搜索属性并开启。Safari和IE浏览器迄今仍不支持这些特性。

除非[浏览器][Link 2]对其支持有所改善，最好还是在你的设计中不要将CSS混和模式作为重要的部分，而只是作为既定设计中增强的效果。然而，出于演示的目的，你最好能在同时支持`background-blend-mode`和`mix-blend-mode`这两个属性的浏览器中打开链接内容。

## background-blend-mode的工作原理 ##

background-blend-mode属性指定了源元素应该怎样把自己的颜色同自己的背景图片和背景颜色混和起来。如果该元素下还有任何其它的层（例如一个使用蓝色背景颜色的section元素），它将不会把自己的颜色与该元素相混合。它只会把自身的颜色与[CSS][CSS 1]中为其指定的背景图像和颜色混和在一起。

如下例所示：

1.  background-image: url(images/sample.png);
2.  background-color: red;
3.  background-blend-mode: multiply;

如果你正在使用的是多个背景图片，那么你可以分别为它们应用多个背景图片混和模式，例如：

1.  background-image: url(images/sample1.png), url(images/sample2.png);
2.  background-color: blue;
3.  background-blend-mode: screen, overlay;

在上面的例子中， sample1.png图片将会应用screen混和模式，而 sample2.png会应用overlay模式。

## 怎样使用background-blend-mode属性 ##

CSS3的候选推荐标准中也有一些混合模式的选项，但目前最有用的是背景混合模式 ：background-blend-mode。 该属性允许我们混合两个图像，或一个图像和一个背景颜色。

实例如下所示：

1.  <div class="blend"></div>

这个是基类:

1.  .blend
2.  \{
3.  width:780px;
4.  height:539px;
5.  background:\#3db6b8 url("lighthouse.jpg") no-repeat center center;
6.  \}

现在，我们准备添加混合模式。

要做到这一点，我们要添加另一个类到我们的div，例如“multiply”：

1.  <div class="blend multiply"></div>

然后我们将创建第二个样式规则：

1.  .blend.multiply
2.  \{
3.  background-blend-mode: multiply;
4.  \}

如果你想看看所有的代码可以[在这里下载源文件。][Link 3]替换里面的图片路径你就可以看到展示效果。

## 正片叠底模式（Multiply） ##

Multiply, 正如它的名字所暗示的，它以混合色的像素为基础，所以会出现较暗的颜色。 黑色叠加结果为黑色，白色叠加图像不变。

1.  background-blend-mode: multiply;

## 屏幕模式/滤色(Screen) ##

与正片叠底模式相反，合成图层的效果是显现两图层中较高的灰阶，而较低的灰阶则不显现（即浅色出现，深色不出现），产生一幅更加明亮的图像。

1.  background-blend-mode: screen;

## 叠加模式(Overlay) ##

Overlay 是一个复杂的混合模式。 实际效果取决于基色：浅色变得更浅，暗色变的更暗。

overlay混和模式既有screen中的像素颜色变浅效果，也有multiply中的像素颜色加深效果。究竟使用何种模式，取决于底层的色彩，合成后有些区域图变暗有些区域变亮

1.  background-blend-mode: overlay;

## 变暗模式(Darken) ##

此模式的效果取决于源和背景颜色之间更深的（色彩），即混合两图层像素的颜色时，对这二者的RGB值（即RGB通道中的颜色亮度值）分别进行比较，取二者中低的值再组合成为混合后的颜色。

1.  background-blend-mode: darken;

## 变亮模式(Lighten) ##

这个模式与darken相反，它的效果取决于源和背景颜色之间更浅的（色彩）。即将两像素的RGB值进行比较后，取高值成为混合后的颜色，因而总的颜色灰度级升高，造成变亮的效果。

1.  background-blend-mode: lighten;

## 颜色减淡(Color-Dodge) ##

Color-Dodge模式加亮了背景颜色，从而形成鲜明对比的图像。它减淡亮基色降低对比度，以反映混合色。

1.  background-blend-mode: color-dodge;

## 颜色加深(Color-Burn) ##

这种模式加深了背景色，并且增加了源和背景色彩的对比度。即让底层的颜色变暗，有点类似于正片叠底，但不同的是，它会根据叠加的像素颜色相应增加底层的对比度。

1.  background-blend-mode: color-burn;

## 强光模式(Hard-Light) ##

Hard light无论是multiply，或者screen 的颜色取决于混合色。这种模式与overlay相反。它在较浅的像素上使用multiply模式，而在较深的像素上使用screen模式。作用效果如同是打上一层色调强烈的光，所以称之为强光。

1.  background-blend-mode: hard-light;

## 柔光模式(Soft-Light) ##

这种模式在较深像素上使用multiply模式，而在较浅像素上使用screen模式。与overlay有些相似，但有轻微的不同。作用效果如同是打上一层色调柔和的光，因而被我们称之为柔光。作用时将上层图像以柔光的方式施加到下层。

柔和的光线类似于强光线 ，但不是叠加或过滤的颜色，柔和的光线使用减淡和加深起了一个微妙的影响。

1.  background-blend-mode: soft-light;

## 差值/差异模式(Difference) ##

要混合图层双方的RGB值中每个值分别进行比较，用高值减去低值作为合成后的颜色，通常用白色图层合成一图像时，可以得到负片效果的反相图像。用黑色的话不发生任何变化（黑色亮度最低，下层颜色减去最小颜色值0，结果和原来一样），而用白色会得到反相效果（下层颜色被减去，得到补值），其它颜色则基于它们的亮度水平。

1.  background-blend-mode: difference;

## 排除模式(Exclusion) ##

exclusion混和模式与difference模式类似，但产生的图像对比度更低一些。

1.  background-blend-mode: exclusion;

## 色相/色调模式(Hue) ##

Hue取基色和混合色的颜色亮度和饱和度，并将它们合并。这种模式使用当前层的色相值去替换背景图像的色相值，而饱和度与亮度不变。

1.  background-blend-mode: hue;

## 饱和度模式(Saturation) ##

Saturation， 就像hue一样，合并两个具有混合色属性的基本颜色值，然后进行饱和。

saturation用当前层的饱和度去替换背景图像的饱和度，而色相值与亮度不变。

1.  background-blend-mode: saturation;

## 颜色模式(Color) ##

color兼有色相和饱和度两种模式，用当前层的色相值与饱和度替换背景图像的色相值和饱和度，而亮度保持不变。

1.  background-blend-mode: color;

## 亮度/明度模式(Luminosity) ##

这种模式使用当前层的亮度值去替换背景图像的亮度值，而色相值与饱和度不变。该模式产生的效果与Color模式刚好相反，它根据上层颜色的明度分布来与下层颜色混合。

1.  background-blend-mode: luminosity;

有些人可能觉得不方便准确地记得每一个混合模式的工作原理，所以我们根据它们提供的一般效果，将它们分成几大类，这种方法是非常有用的。我们可以将所有这些模式分为以下几类：

*  变暗(Darkening)：darken, multiply, 和 color-burn模式，各自会按自己的方式，将图像变暗。
 *  变亮(Lightening)：lighten, screen 和 color-dodge模式，将图像变得更亮。
 *  对比度(Contrast)：overlay, soft-light 和 hard-light模式，将改变图像对比度。
 *  相对(Comparative)：difference 和 exclusion模式划分到这个类别中。
 *  成分(Component)：hue, saturation, color 和 luminosity模式划分到这个类别中。其他混合模式独立作用于每个颜色通道，而这个类中的模式则从源层挑出某一部分，然后把其它部分和背景层混和。

## 总结： ##

在网页中，混合模式非常适合用于创建不同的效果，要是在以前，这种功能是使用Web技术无法给我们的。这是一个即将到来的技术，而且，在写这篇文章的时候，浏览器的支持还不协调，但它只会随着时间的推移变得更好。您可以通过混和模式创造出一些精彩的调整和效果，所以在未来，你将不再需要仅仅为了给页面中的图形元素添加某种效果，而启动一个照片编辑器的应用程序。

[15_CSS]: /images/20211223/145a9c6b459b4b56a1206df220af8779.png
[CSS]: http://yusi123.com/3170.html
[30]: http://yusi123.com/3140.html
[2014_15_HTML_CSS]: http://yusi123.com/2121.html
[40]: http://yusi123.com/2626.html
[30_Parallax Scrolling]: http://yusi123.com/1083.html
[Link 1]: http://caniuse.com/#feat=css-backgroundblendmode
[caniuse.com]: http://caniuse.com/
[Link 2]: http://yusi123.com/3115.html
[CSS 1]: http://yusi123.com/tag/css
[Link 3]: http://images.yusi123.com/wp-content/uploads/2014/07/download.zip