我如何使它使背景图像的任何部分，在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中创建的手动背景，也是我想要达到的效果的例子。我们的目标是让它的顶部向下移动，当它向下移动时，边界内的任何东西都是双向的。图像

编辑:例如，这里，第三个例子中只有部分图片在星体内显示。我想要的是，只有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>

​