# 混合模式
*混合模式可以将多个图层混合在一起，创建混合的视觉效果。*
混合模式，我在这之前从来没用过。开发一般的网页真的很少会用到混合模式，因为稍微复杂的图片或者页面，都是通过UI设计图片，然后直接添加到网页上，这样开发速度会更快。
但是为了教程的完整性，还是在这里做个介绍。
[Duotone](https://en.wikipedia.org/wiki/Duotone)，中文是双色调的意思，一种很流行的设计风格，整个图片主要由两种颜色组成：一个是亮色，一个是暗色。使用css混合可以实现这种双色调风格。
使用混合模式、fiter属性和伪元素，可以很方便将双色调风格应用于图片上。
## 一.混合模式（Blend Model）
设计软件，例如photoshop，会经常用到混合模式，它们使用图层功能，将多种颜色混合在一起。可以通过控制颜色混合的方式，创建非常有趣的视觉效果。
上面使用了`mix-blend-mode`将混合效果应用于整个元素，还可以使用`background-blend-mode`仅使元素的背景色混合。
如果一个元素拥有多个背景图，可以使用`background-blend-mode`使背景图彼此混合。
```css
.demo {
max-width: 400px;
height: 400px;
position: relative;
background: url(https://source.unsplash.com/YJOuS1GZbDQ/600x400),
url(https://source.unsplash.com/V7oLFRVqeHM/600x400),
url(https://source.unsplash.com/_wWjQr1JZ1k/600X400);
background-size: cover;
background-blend-mode: overlay;
}
```
混合模式分为两类：可分离的和不可分离的。分离的混合模式将RGB单独考虑，不可分离的混合模式，统一考虑所有颜色组成。
## 二.可分离的混合模式
### `normal`
`normal`是混合模式的默认值。不会改变元素的混合效果。
### `multiply`
`multiply`混合模式就像是将多个透明图层叠加在一起。白色像素将会显示为透明色，而黑色像素将会显示为黑色。白色和黑色之间的颜色的像素将会乘以它的亮度值。这意味着亮的颜色会越亮，而暗的颜色会变暗，`multiply`一般会生成一个偏暗的效果。
### `screen`
`screen`往往会创建与`multiply`相反的偏亮的效果。
```css
.my-element {
mix-blend-mode: screen;
}
```
### `overlay`
`overlay`介于`multiply`和`screen`之间，它组合了`multiply`和`screen`效果，暗色变暗，亮色变亮，介于暗亮之间的颜色，例如50%的灰色将不会受影响。
```css
.my-element {
mix-blend-mode: overlay;
}
```
### `darken `
`darken`在混合两种颜色的时，会分别比较两个颜色的RGB分量，取RGB值比较暗的（小值），生成新的RGB。
```css
.my-element {
mix-blend-mode: darken;
}
```
### `lighten `
`lighten`与`darken`类似，不过比较时，分别取RGB中较量的分量，生成新的RGB。
```css
.my-element {
mix-blend-mode: lighten;
}
```
### `color-dodge`
`color-dodge`会使背景色变亮，衬托前景色。
```css
.my-element {
mix-blend-mode: color-dodge;
}
```
### `color-burn`
`color-burn`会增加对比度，形成更饱和的中间色，减少高光。
```css
.my-element {
mix-blend-mode: color-burn;
}
```
### `hard-light`
`hard-light`会创建一个相反的效果。这个模式要么会形成`multiply`的效果，要么形成`screen`效果，当像素亮度低于50% gray时，使用multiply效果，亮度大于50% gray时，使用screen效果。
```css
.my-element {
mix-blend-mode: hard-light;
}
```
### `soft-light`
`soft-light`是`overlay`的柔和版本，效果差不多，但是亮与暗的反差减小。
```css
.my-element {
mix-blend-mode: soft-light;
}
```
### `difference`
`difference`混合两种颜色时，使用的是差值法，如果两个元素的RGB完全相同，差值为0，最后形成的颜色就是黑色。
```css
.my-element {
mix-blend-mode: difference;
}
```
### `exclusion `
`exclusion `与`difference`非常像。但是当两个像素相同时，它会生成50%的gray，而不是黑色，这样会生成一个相对柔和的结果。
```css
.my-element {
mix-blend-mode: exclusion;
}
```
## 三.不可分离的混合模式
你可以认为这种混合模式与HSL颜色结构类似。
### `hue`
`hue`将源色的色度值和背景色的饱和度和亮度值结合，形成新的颜色。
```css
.my-element {
mix-blend-mode: hue;
}
```
### `saturation `
`saturation`将源色的饱和度值和背景色的色度值和亮度值结合，形成新的颜色。
```css
.my-element {
mix-blend-mode: saturation;
}
```
### `color`
`color`将源色的饱和度和色度值与背景色的亮度混合形成新的颜色。
```css
.my-element {
mix-blend-mode: color;
}
```
### `Luminosity`
`Luminosity`与`color`相反，将原色的亮度值与背景色的饱和度和色度混合。
```css
.my-element {
mix-blend-mode: luminosity;
}
```
## 四.`isolation`
设置`isolation: isolate;`可以创建一个新的栈空间，这可以防止它与背景图层混合。但是这个对`background-blend-mode`无效。
（完）