我正在尝试在我的网站上制作双色调的所有图像，而不必使用伪元素和包装器。 （试图保持 HTML 干净）

Question

目前，我一直在使用这个教程。但它并不像我希望的那样干净，我相信有更好的选择。

我知道我能做到：

.img-wrap{
    position: relative;
}
.img-wrap img{
    filter: grayscale(1);
    width: 100%;
    z-index: 0;
}
.img-wrap::before{
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: red;
    z-index: 1;
    mix-blend-mode: screen;
}

<div class="img-wrap">
  <img src="https://picsum.photos/200/100/">
</div>

但我想在不使用包装器的情况下完成此操作。

Answer 1

您可以使用 SVG 过滤器来执行此操作。

img{
  width: 100%;
  filter: url(#duotone);
}

<img src="https://picsum.photos/200/100"/>

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="duotone">
    <feColorMatrix type="matrix" result="grayscale"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0" >
    </feColorMatrix>
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
      <feFuncR type="table" tableValues="1 1"></feFuncR>
      <feFuncG type="table" tableValues="0 1"></feFuncG>
      <feFuncB type="table" tableValues="0 1"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer>
  </filter>
</svg>

Answer 2

似乎只通过在图像元素上定位一个类来工作。

img.duo-tone-me {
  filter: grayscale(1);
  width: 100%;
  z-index: 0;
}

img.duo-tone-me:before {
  content: “”;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: red;
  z-index: 1;
  mix-blend-mode: screen;
}

<img class="duo-tone-me" src="https://picsum.photos/200/100" />