css-tutorial/chapters/023 混合模式.md

# 混合模式

*混合模式可以将多个图层混合在一起，创建混合的视觉效果。*

混合模式，我在这之前从来没用过。开发一般的网页真的很少会用到混合模式，因为稍微复杂的图片或者页面，都是通过UI设计图片，然后直接添加到网页上，这样开发速度会更快。

但是为了教程的完整性，还是在这里做个介绍。

[Duotone](https://en.wikipedia.org/wiki/Duotone)，中文是双色调的意思，一种很流行的设计风格，整个图片主要由两种颜色组成：一个是亮色，一个是暗色。使用css混合可以实现这种双色调风格。
<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/AhCola/embed/oNwjEqg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/oNwjEqg">
  </a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

使用混合模式、fiter属性和伪元素，可以很方便将双色调风格应用于图片上。

## 一.混合模式（Blend Model）

设计软件，例如photoshop，会经常用到混合模式，它们使用图层功能，将多种颜色混合在一起。可以通过控制颜色混合的方式，创建非常有趣的视觉效果。

<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_02" src="https://codepen.io/AhCola/embed/powjaZZ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/powjaZZ">
  023 Blending_Model_02</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

上面使用了`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`一般会生成一个偏暗的效果。
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_03" src="https://codepen.io/AhCola/embed/xxrwYBx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/xxrwYBx">
  023 Blending_Model_03</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `screen`

`screen`往往会创建与`multiply`相反的偏亮的效果。
```css
.my-element {
    mix-blend-mode: screen;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_04" src="https://codepen.io/AhCola/embed/LYLpQvp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/LYLpQvp">
  023 Blending_Model_04</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `overlay`

`overlay`介于`multiply`和`screen`之间，它组合了`multiply`和`screen`效果，暗色变暗，亮色变亮，介于暗亮之间的颜色，例如50%的灰色将不会受影响。
```css
.my-element {
    mix-blend-mode: overlay;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_05" src="https://codepen.io/AhCola/embed/jOwbZRp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/jOwbZRp">
  023 Blending_Model_05</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `darken `

`darken`在混合两种颜色的时，会分别比较两个颜色的RGB分量，取RGB值比较暗的（小值），生成新的RGB。
```css
.my-element {
    mix-blend-mode: darken;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_06" src="https://codepen.io/AhCola/embed/YzQyebp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/YzQyebp">
  023 Blending_Model_06</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `lighten `

`lighten`与`darken`类似，不过比较时，分别取RGB中较量的分量，生成新的RGB。
```css
.my-element {
  mix-blend-mode: lighten;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_07" src="https://codepen.io/AhCola/embed/powjamQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/powjamQ">
  023 Blending_Model_07</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `color-dodge`

`color-dodge`会使背景色变亮，衬托前景色。

```css
.my-element {
  mix-blend-mode: color-dodge;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_08" src="https://codepen.io/AhCola/embed/LYLpQKG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/LYLpQKG">
  023 Blending_Model_08</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `color-burn`

`color-burn`会增加对比度，形成更饱和的中间色，减少高光。
```css
.my-element {
    mix-blend-mode: color-burn;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_08" src="https://codepen.io/AhCola/embed/NWgGyZM?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/NWgGyZM">
  023 Blending_Model_08</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `hard-light`

`hard-light`会创建一个相反的效果。这个模式要么会形成`multiply`的效果，要么形成`screen`效果，当像素亮度低于50% gray时，使用multiply效果，亮度大于50% gray时，使用screen效果。
```css
.my-element {
    mix-blend-mode: hard-light;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_09" src="https://codepen.io/AhCola/embed/ZEybrgZ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/ZEybrgZ">
  023 Blending_Model_09</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `soft-light`

`soft-light`是`overlay`的柔和版本，效果差不多，但是亮与暗的反差减小。
```css
.my-element {
    mix-blend-mode: soft-light;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_10" src="https://codepen.io/AhCola/embed/WNOQzeK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/WNOQzeK">
  023 Blending_Model_10</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `difference`

`difference`混合两种颜色时，使用的是差值法，如果两个元素的RGB完全相同，差值为0，最后形成的颜色就是黑色。
```css
.my-element {
    mix-blend-mode: difference;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_11" src="https://codepen.io/AhCola/embed/RwgWMwV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/RwgWMwV">
  023 Blending_Model_11</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `exclusion `

`exclusion `与`difference`非常像。但是当两个像素相同时，它会生成50%的gray，而不是黑色，这样会生成一个相对柔和的结果。
```css
.my-element {
    mix-blend-mode: exclusion;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_12" src="https://codepen.io/AhCola/embed/MWoaVWx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/MWoaVWx">
  023 Blending_Model_12</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 三.不可分离的混合模式

你可以认为这种混合模式与HSL颜色结构类似。

### `hue`

`hue`将源色的色度值和背景色的饱和度和亮度值结合，形成新的颜色。

```css
.my-element {
    mix-blend-mode: hue;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_13" src="https://codepen.io/AhCola/embed/zYzvWGY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/zYzvWGY">
  023 Blending_Model_13</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `saturation `

`saturation`将源色的饱和度值和背景色的色度值和亮度值结合，形成新的颜色。
```css
.my-element {
    mix-blend-mode: saturation;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_14" src="https://codepen.io/AhCola/embed/OJgyvVQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/OJgyvVQ">
  023 Blending_Model_14</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `color`

`color`将源色的饱和度和色度值与背景色的亮度混合形成新的颜色。
```css
.my-element {
    mix-blend-mode: color;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_15" src="https://codepen.io/AhCola/embed/BaZoror?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/BaZoror">
  023 Blending_Model_15</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `Luminosity`

`Luminosity`与`color`相反，将原色的亮度值与背景色的饱和度和色度混合。
```css
.my-element {
    mix-blend-mode: luminosity;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="023 Blending_Model_16" src="https://codepen.io/AhCola/embed/oNwjqbz?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/oNwjqbz">
  023 Blending_Model_16</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 四.`isolation`

设置`isolation: isolate;`可以创建一个新的栈空间，这可以防止它与背景图层混合。但是这个对`background-blend-mode`无效。

（完）