background-blend-mode

属性作用：将背景图片和背景颜色混合处理

scss部分

.box {
    width: 200px;
    height: 200px;
    margin: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background-image: url(../imgs/bird.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: pink;
    
    @each $val in normal multiply screen overlay darken lighten color-dodge {
      &.#{$val} {
        background-blend-mode: $val;
      }
    }
 }

js部分

function createEle(tag, attrs = {}, text) {
  let el = document.createElement(tag)
  for (let key in attrs) {
    el.setAttribute(key, attrs[key])
  }
  if (text) {
    el.appendChild(document.createTextNode(text))
  }
  return el
}

let el = document.querySelector('.container')
  , arr = [
    'normal',
    'multiply',
    'screen',
    'overlay',
    'darken',
    'lighten',
    'color-dodge'
  ], frag = document.createDocumentFragment()
  for (let i = 0; i < arr.length; i++) {
    frag.append(createEle('div', { class: `box ${arr[i]}` }, arr[i]))
  }
  el.appendChild(frag)

demo截图

参考 mdn