混合模式 blend-mode

混合模式的值的对应效果可以完全类比PS中图层模式效果,他们的对应关系是:

  1. normal 正常模式
  2. multiply 正片叠底模式
  3. screen 滤色模式
  4. overlay 叠加模式
  5. darken 变暗模式
  6. lighten 变亮模式
  7. color-burn 颜色加深模式
  8. hard-light 强光模式
  9. soft-light 柔光模式
  10. difference 差值模式
  11. exclusion 排除模式
  12. hue 色相模式
  13. saturation 饱和度模式
  14. color 颜色模式
  15. luminosity 亮度模式

mix-blend-mode

mix-blend-mode主要作用是把目标元素和其下方的背景元素混合。

<div class="mode">
  <img src="./bg.jpg" alt="" class='bg'>
  <img src="./firefox-logo.svg" alt="" class='content'>
</div>
.mode {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg {
  width: 100%;
}
.content {
  width: 50%;
  height: 50%;
  position: absolute;
  mix-blend-mode: luminosity;
}

normal 正常模式

multiply 正片叠底模式

screen 滤色模式

overlay 叠加模式

darken 变暗模式

lighten 变亮模式

color-burn 颜色加深模式

hard-light 柔光模式

soft-light 柔光模式

difference 差值模式

exclusion 排除模式

hue 色相模式

saturation 饱和度模式

color 颜色模式

luminosity 亮度模式

background-blend-mode

background-blend-mode是 作用于 background-imagebackground-color 的。并且是写在一个background属性后面的图片。

.bg {
  width: 100%;
  height: 200px;
  background-size: 100% 100%;
  background-image: url(./bg.jpg);
  background-color: blue;
  background-blend-mode: screen;
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress