将SVG过滤器应用于div的背景
我有一个坐在图像前面的背景颜色的<div> 。 我试图使用SVG应用乘法效果，以便div背后的背景图像通过：
<svg>
<filter id="multiply">
<feBlend mode="multiply"/>
</filter>
</svg>
不幸的是，只有坚实的背景颜色正在改变，并且我在背景中没有获得透明度。
这是小提琴：https：//jsfiddle.net/0p58bxsp/1/
我期待的效果是这样的：
我知道视觉效果可能会使用rgba值作为背景颜色，但我非常专门寻找应用了多重滤镜的纯色组合。
这是目前SVG实施的限制吗？
以下是多重混合的定义：
乘法混合模式将顶层每个像素的数字与底层的对应像素相乘。 结果是一张较暗的图片。 ，其中a是基本图层值，b是顶层图层值。
因此，使用不透明或alpha不会给我我正在寻找的确切结果。
如果您使用BackgroundImage伪输入完全保留在SVG 1.1中，这应该是可能的 - 但只有IE10曾经支持它用于内联SVG（Opera支持.svg文件）。 Firefox，Chrome和Safari从来不支持它，现在它正式宣布“不会被那些浏览器工作的人执行”。
您可以使用feImage导入背景图像的副本，并将其恰好放置到恰好与实际背景相匹配的位置。 但取决于你的设计 - 这可能需要广泛的JavaScript。 而url（）过滤器可能会表现得很奇怪。 https://jsfiddle.net/0p58bxsp/3/显示了如何做到这一点 - 但它也表现出Chrome中的回归bug，并且定位原语将在下一个Chrome中修复。
<div id="background">
<div id="effect">
Effect goes here
</div>
</div>
<svg width="100%" height="100%" viewBox="0 0 200 200">
<defs>
<filter id="multiply" x="0%"
y="0%" height="300%" width="300%">
<feImage x="0" width="400" height="400" y="0" preserveAspectRatio="xMaxYMax meet" xlink:href="http://lorempixel.com/400/400/" />
<feOffset dx="-100" dy="-100"/>
<feBlend mode="multiply" in="SourceGraphic"/>
</filter>
</defs>
</svg>
Safari 9（并且只有Safari 9）有一个“背景滤镜”，可以做到这一点，而且你还可以指定一个混合混合模式，它具有更广泛的支持，但这仍然很有优势。
如果您需要多重混合，最好将所有内容都保存在SVG中。
你应该添加不透明度：0.4; 成效班。 它会正常工作。
#effect {
color: #fff;
height: 200px;
margin: 100px 0 0 100px;
width: 200px;
opacity: 0.4;
background-color: #3d3934;
filter: url(#multiply);
-webkit-filter: url(#multiply);
-moz-filter: url(#multiply);
}
据我所知，svg效果仅限于元素本身。 你不能用它来混合另一个元素。
然而，你可以通过标准的CSS混合模式获得这种效果
#background {
background-image: url(http://lorempixel.com/400/400/);
height: 400px;
padding: 1px;
width: 400px;
}
#effect {
color: #fff;
height: 200px;
margin: 100px 0 0 100px;
width: 200px;
background-color: gray;
mix-blend-mode: multiply;
}<div id="background">
<div id="effect">
Effect goes here
</div>
</div>