Css 之间的差异<；img>；和背景图像混合模式

我正在尝试创建一个类似于这支笔上显示的duotone效果：

我的尝试就在这里，并且完全按照我希望的方式为普通img标签工作：

但是，当我将相同的样式和伪元素应用于具有背景图像的div时，它会产生完全不同的效果，正如您在第二幅图像中看到的那样

我尝试在div上使用$dark_blue颜色和背景混合模式，但这似乎根本不起作用

---

如何在背景图像上实现相同的效果？

您可以做的一件事就是将

替换为

，并相应地调整样式（将

img

替换为

div

基本上-同时给出

div

尺寸

宽度：100%；高度：100%；

）。这样它的“分层”是一样的

因此，您的标记将是：

<div class="duotone-background" >
  <div style="background-image: url('http://dlvec.btmcdev.com/wp-content/uploads/2017/11/Screen-Shot-2017-11-21-at-10.07.07-AM-1024x617.jpg')"></div>
</div> 

---

查看此更新的

精彩绝伦！真不敢相信我没想到。非常感谢。

<div class="duotone-background" >
  <div style="background-image: url('http://dlvec.btmcdev.com/wp-content/uploads/2017/11/Screen-Shot-2017-11-21-at-10.07.07-AM-1024x617.jpg')"></div>
</div> 

.duotone-background {
    display: inline-block;
    height: 386px;
    position: relative;
    width: 640px;
  vertical-align: top;

    &:before,
    &:after {
        content: "";
        opacity: 1;
        pointer-events: none;
        position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        transition: 0.5s;
            -webkit-transition: 0.5s;
    }

    &:before {
        background: $dark_blue;
        mix-blend-mode: color;
        z-index: 1;
    }

    &:after {
        background: $white_blue;
        mix-blend-mode: color;
        z-index: 2;
    }

    &:hover {
        filter: none;
            -webkit-filter: none;
        &:before,
        &:after {
            opacity: 0;
            transition: 0.5s;
                -webkit-transition: 0.5s;
        }

    div {
      filter: none;
            -webkit-filter: none;
    }
    }

  div {
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: grayscale(1) contrast(1) brightness(1);
        -webkit-filter: grayscale(1) contrast(1) brightness(1);
  }
}