将SVG过滤器应用于div的背景色

Question

我有一个<div>，背景色坐在图像前面。我尝试使用SVG应用多重效果，以便背景图像落后于 div：

<svg>
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
</svg>

不幸的是，只有固体背景颜色正在改变，而且我没有透明到背景。

这里是小提琴：https://jsfiddle.net/0p58bxsp/1/

我期待的效果是这样的：

我知道使用rgba值作为背景颜色可以捏造视觉效果，但我非常专注地寻找应用了多重滤镜的纯色组合。

这是当前SVG实施的限制吗？

这里是乘法混合的定义：

  

乘法混合模式将顶层的每个像素的数字与底层的相应像素相乘。结果是一张更暗的图片。 ，其中a是基础层值，b是顶层值。

因此，使用不透明度或alpha不能为我提供我正在寻找的确切结果。

Answer 1

如果您通过使用BackgroundImage伪输入完全保留在SVG 1.1中，这应该是可能的 - 但只有IE10支持内联SVG（Opera支持.svg文件）。 Firefox，Chrome＆amp; Safari从不支持它，现在正在被那些使用这些浏览器的人正式宣布为“不实现”。

您可以使用feImage导入背景图像的副本，并将其恰到好处地以准确匹配实际背景。但取决于你的设计 - 这可能需要广泛的JavaScript。并且url（）过滤器的行为可能很奇怪。 https://jsfiddle.net/0p58bxsp/3/显示了如何执行此操作 - 但它也会在Chrome中显示一个回归错误，其中定位的基元将在下一个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中。

Answer 2

您应该将不透明度：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);
}

Answer 3

据我所知，svg效果仅限于元素本身。你不能用它来与另一个元素混合。

然而，您可以使用标准CSS mix-blend-mode

获得此效果

＆＃13;

＆＃13;

#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;
}

＆＃13;

<div id="background">
    <div id="effect">
        Effect goes here
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;