CSS混合模式浅析

熟悉Photoshop或Illustrator制图软件的应该知道它们都有混合模式。SVG以及Canvas中也有混合模式。混合模式可以指定混合的元素，从而改变元素交叉区域的颜色。每个模式使用特定颜色公式来混合基色和目标色。CSS的混合模式的设置有两个属性，分别是background-blend-mode和mix-blend-mode下面分别来看对应的属性和值,以及简单的几个示例

background-blend-mode 混合背景层

属性	值	说明
background-blend-mode	normal	正常
background-blend-mode	multiply	正片叠底
background-blend-mode	screen	滤色
background-blend-mode	overlay	叠加
background-blend-mode	darken	变暗
background-blend-mode	lighten	变亮
background-blend-mode	color-dodge	颜色减淡
background-blend-mode	color-burn	颜色加深
background-blend-mode	hard-light	强光
background-blend-mode	soft-light	柔光
background-blend-mode	difference	差值
background-blend-mode	exclusion	排除
background-blend-mode	hue	色相
background-blend-mode	saturation	饱和度
background-blend-mode	color	颜色
background-blend-mode	luminosity	亮度

mix-blend-mode 元素混合

属性	值	说明
mix-blend-mode	normal	正常
mix-blend-mode	multiply	正片叠底
mix-blend-mode	screen	滤色
mix-blend-mode	overlay	叠加
mix-blend-mode	darken	变暗
mix-blend-mode	lighten	变亮
mix-blend-mode	color-dodge	颜色减淡
mix-blend-mode	color-burn	颜色加深
mix-blend-mode	hard-light	强光
mix-blend-mode	soft-light	柔光
mix-blend-mode	difference	差值
mix-blend-mode	exclusion	排除
mix-blend-mode	hue	色相
mix-blend-mode	saturation	饱和度
mix-blend-mode	color	颜色
mix-blend-mode	luminosity	亮度
mix-blend-mode	initial	初始
mix-blend-mode	inherit	继承
mix-blend-mode	unset	复原

文本纹理叠加

<h2 class="mix-overlay">
  <span data-text="CSS纹理叠加"></span>
  CSS纹理叠加
</h2>

.mix-overlay {
  font-size: 60px;
  background-image: url('./images/wnl.png');
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.mix-overlay>span {
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(112, 59, 255, 0.562), rgba(255, 123, 0, 0.849));
  /* 对两层标签进行叠加 */
  mix-blend-mode: overlay;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.mix-overlay>span::before {
  content: attr(data-text);
}

效果如下

背景混合

<div class="blend-bg"></div>

.blend-bg {
  width: 400px;
  height: 500px;
  background: url('./images/a.png'), url('./images/b.png');
  background-size: cover;
  background-blend-mode: lighten;
}

效果如下

颜色减淡

<h1>混合模式：颜色减淡</h1>

html,
body {
  margin: 0;
  background-color: white;
}
body {
  background-image: url('./images/ba.png');
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  overflow: hidden;
}
h1 {
  /* 混合模式颜色减淡color-dodge  */
  mix-blend-mode: color-dodge;
  font-size: 5rem;
  text-align: center;
  margin: 0;
  padding: 26vh 200px;
  color: #D1956C;
}

效果如下

视频混合

需要一个背景图片和一个设计意义上的背景透明的视频，将这两个放一块，嗯。。。下雨了

<div class="box">
  <video controls="controls" loop="loop">
    <source src="./images/rains-s.mp4" type="video/mp4" />
  </video>
</div>

.box {
  width: 270px;
  height: 480px;
  overflow: hidden;
  background-image: url('./images/school.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
video {
  mix-blend-mode: screen;
}

效果如下

当然还可以结合gif图之类的，脑洞有多大就有多神奇，如有不足之处，欢迎补充、纠正、交流，谢谢。

参考资料：

MDN: mix-blend-mode

MDN: background-blend-mode