如何使 svg 下的背景图像的任何部分都具有双色调？

Question

我有一张背景图片，希望在屏幕周围有一个边框，该边框具有图片的双色调，（不是在 photoshop 中制作的手动编辑的双色调，我打算制作动画）我该如何实现这一点，以便某个 svg 下面的背景图像的任何部分都受此影响吗？我计划对 svg 进行动画处理，使其移动，并且图像中双色调的部分会发生变化。

这是双色调的示例：

body {
  background: #1d1f20;
  padding: 20px;
  text-align: center;
}

.svg-filters {
  height: 0;
  left: -9999em;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 0;
}

.img {
  margin: 5px;
  width: 350px;
}

hr {
  border: solid 1px #191919;
}

.duotoned--peachy {
  filter: url('#duotone_peachypink');
}

.duotoned--navy {
  filter: url('#duotone_navyorange');
}

<!-- Duotone Article Demo -->

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
  <filter id="duotone_peachypink">
    <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" />
    
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_magenta_gold">
      <feFuncR type="table" tableValues="0.3411764706 0.1082352941"></feFuncR>
      <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG>
      <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>
  
  <filter id="duotone_navyorange">
    <feColorMatrix type="matrix" result="grayscale"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0" />
    
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_navy_orange">
      <feFuncR type="table" tableValues="0.05490196078 1"></feFuncR>
      <feFuncG type="table" tableValues="0.1568627451 0.5921568627"></feFuncG>
      <feFuncB type="table" tableValues="0.1647058824 0.003921568627"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>   
</svg>

<img class="img" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Original Image'>

<img class="img duotoned--peachy" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Duotoned Image'>

<hr>

<img class="img" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/jardin-majorelle-small.jpg' alt='Original Image'>

<img class="img duotoned--navy" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/jardin-majorelle-small.jpg' alt='Duotoned Imaged'>

附上这张照片是我在photoshop中手工制作的背景，也是我想要达到的效果的例子。目标是让它的边界顶部向下移动，并且当它向下移动时边界内的任何东西都是双色调的。 image

编辑：例如here，第三个例子只显示了星星里面的部分图像。我想要的是只有 svg 中的图像部分具有双色调效果。

Answer 1

最简单的方法可能是将两张图片叠加在一起，然后将形状合适的剪辑应用到最上面的一张上。

body {
  background: #1d1f20;
  padding: 20px;
  text-align: center;
  overflow: auto;
}

.svg-filters {
  height: 0;
  left: -9999em;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 0;
}

.img {
  margin: 5px;
  width: 350px;
}

hr {
  border: solid 1px #191919;
}

.duotoned--peachy {
  filter: url('#duotone_peachypink');
}

.diamond-clip {
  clip-path: url(#diamond-clip);
}

.stack {
  position: relative;
}

.stack img {
  position: absolute;
  top: 0;
  left: 0;
}

<!-- Duotone Article Demo -->

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
  <filter id="duotone_peachypink">
    <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" />
    
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_magenta_gold">
      <feFuncR type="table" tableValues="0.3411764706 0.1082352941"></feFuncR>
      <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG>
      <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>
  
  <clipPath id="diamond-clip" clipPathUnits="objectBoundingBox">
    <polygon points="0.5,0, 1,0.5, 0.5,1, 0,0.5"/>
  </clipPath>

</svg>

<div class="stack">
  <img class="img" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Original Image'>
  <img class="img duotoned--peachy diamond-clip"
                   src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Duotoned Image'>
</div>

如何使 svg 下的背景图像的任何部分都具有双色调？

How do I make it so that any part of a background image that is under an svg has a duotone?

html

javascript

css

svg

mask