Question

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

这是双色调的一个例子：

＆＃13;

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');
}

＆＃13;

<!-- 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'>

＆＃13;

这张照片是我在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下的背景图像的任何部分都具有双色调？

1 个答案: