我有一张背景图片,并希望在屏幕周围有一个边框,该边框具有图片的双色调,(不是在 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 中的图像部分具有双色调效果。
最佳答案
最简单的方法可能是将两张图片叠加在一起,然后将形状适当的剪辑应用到最上面的一张上。
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>
关于javascript - 如何使 svg 下的背景图像的任何部分都具有双色调?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50402054/