图层
在Photoshop等图像编辑软件里，图层是最基础的概念之一。我们平时看一张照片，就可能想到“远处的背景”、“近处的人物”这样的描述，这其实就是在划分图层。多个图层从下到上（从远到近）依次拼合，就得到完整的图像。
分图层很有用。一方面，图层是独立的，修改时不会相互影响，另一方面，图层可以保留原始图像，便于还原或做其他调整。
网页里的图层
在网页里，并没有明确的图层的概念，但却很适合当做图层去理解。网页内的每个元素，都可以看做有一个自己的图层。css里的z-index，也很像是调整图层顺序的工具。
准确地说，决定网页内元素覆盖关系的是 绘制顺序 ，绘制顺序靠后的元素，将覆盖绘制顺序靠前的元素。
与绘制顺序密切相关的概念是 层叠上下文 （ stacking context ）。在一个层叠上下文内，浏览器总是遵循特定的顺序去绘制该上下文内的所有元素。
重叠与合成
我们有时候会很仔细地去调整z-index，这是因为网页内的元素会有重叠：
像这样重叠时，一个元素就挡住另一个元素的一部分。我们可能想改变一下覆盖关系：
在这里，它们的差异只有元素的重叠部分。如果重叠部分和其中一个元素一致，那么看起来就是这个元素更靠上，覆盖了另一个元素。
实际上，网页里的重叠远不只有这样一小部分。上面的示例里的两个元素除了相互重叠外，各自也与本文的背景元素存在重叠。如果在 元素上设置一个背景，那么可以说页面内的所有可见元素的最终显示效果，都和这个背景关联了起来。
网页是如何决定在这样多的重叠关系下，最终呈现的效果的？这也是一个有一定章法的过程，叫做 合成 （ compositing ）。
简单透明度合成
简单透明度合成 （ simple alpha compositing ）是我们很容易理解的一种合成方式。它是在本文接下来要介绍的混合模式出现之前，唯一在网页里应用的合成方式。它在当前各类浏览器内都可用。
之所以说容易理解，是因为它和我们平时的视觉感受很一致。比如前文的例子里改变一下其中一个元素的透明度：
当一个元素是半透明的，那么即便它遮挡了在它后面的元素的一部分，那一部分也是可见的。透明度越高（opacity越接近0），则重叠区域越偏向于被遮挡的元素。完全透明（opacity为0）时，则看起来没有元素被遮挡。
新的合成：混合模式
混合模式 一直是Photoshop等图像编辑软件内的图层面板的重要功能，现在它也存在于w3c的推荐规范。
网页中可用的混合模式如下：
上图是对照Photoshop里的混合模式来标注的，其中紫红色部分是网页里可用的混合模式，最右边则是混合模式的群组分类。默认的“正常”，实际就是前面说的简单透明度合成，因此可以认为是新增了15种混合模式。把“正常”也算上的话，现在网页里可用的混合模式一共16种。
虽然混合模式种类不少，但最为常用的并不多，它们分别是正片叠底（Multiply）、滤色（Screen）、叠加（Overlay）和柔光（Soft Light）。
混合模式的简要原理
混合模式本质是分别取前景和背景（参与混合的两个图层）的像素点，然后用它们的颜色值进行数学运算，从而得到一个新的颜色值。每一个重叠区域的像素点都会经过这个计算过程。
下面以正片叠底为例，说明一下这个过程。
颜色值归一化
混合模式既然拿颜色值来做数学计算，那么颜色值一定是数字的形式。不过，颜色值会对应怎样的数字呢？在混合模式计算里，所有的颜色值都是从0到1的小数（区间[0, 1]）。因此，颜色值在参与计算前，都会转换为这样的小数。
颜色都可以用RGB来表示，如纯白色在css里可以表示为rgb(255, 255, 255)。注意RGB三通道的最大值为255，最小值为0，因此可以用通道色值÷255的计算式转换为0到1的数字。比如纯白色将是rgb(1, 1, 1)。
分通道进行计算
正片叠底（Multiply，日语版写作“乗算”）的计算式是：
x = a × b
可以看到，这就是一个简单的乘法。由于都是0到1之间的小数，因此乘法运算会使结果值更接近0（比如0.8 x 0.5 = 0.4）。因此，正片叠底是一个变暗的混合模式。
每一种混合模式，都会对应这样一个计算式，其中a表示前景图层（Active Layer），b表示背景图层（Background Layer）。RGB三通道分别进行一次运算后，就可以得到混合后的颜色值。整个过程如下：
在图层设置了透明度的情况下，混合的计算式中的数字仍然取图层原本的像素颜色（也就是opacity: 1;时看到的颜色）。
css用法说明
与混合模式有关的一共3个属性，background-blend-mode、mix-blend-mode和isolation。
background-blend-mode
这个属性一般和多重背景的background-image搭配使用，它和background-image一样可以指定多个值。这将在某一个元素的多个背景之间形成混合，比如：
.blending-element-0 { background-image: url(https://www.gxlcms.com/1.jpg), url(2.jpg), url(3.jpg); background-blend-mode: multiply, screen;} 可以看到，这个元素指定了多个背景，从上到下依次是https://www.gxlcms.com/1.jpg、2.jpg、3.jpg。下面的background-blend-mode则是与它对应的，它表示https://www.gxlcms.com/1.jpg的混合模式是multiply，2.jpg的混合模式是screen，3.jpg的混合模式是multiply（当background-blend-mode的数目比background-image少时，会按照值列表进行重复）。
需要注意的是，其中3.jpg这个位于最下层的背景（该元素无背景色），它的混合模式multiply其实是没有作用的，可以认为就是默认值normal。你可以试试在Photoshop里只留一个图层，然后切换各种混合模式，会发现图像不会有任何变化。
如果元素指定了背景色（background-color），那么背景色将成为最下层的背景。
如果有使用background这个简写属性，那么background-blend-mode的值将会被重置为默认。
mix-blend-mode与isolation
这2个属性是搭配使用的。相比前面的background-blend-mode是应用在单个元素的多背景之间，mix-blend-mode则是应用于多个元素，而且除背景外，元素内的文字等其他内容也会被混合。
mix-blend-mode比较类似opacity，作用于一个元素的同时也会作用于这个元素的全部子元素。因此，如果不想要子元素内容也受到影响（就像设置半透明时可能希望里面的文字仍是不透明的），改用background-blend-mode会更合适。
使用mix-blend-mode的代码大致这样：
查看更多关于更丰富的网页多图层效果：css混合模式_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114180