Apply an SVG filter to a div's background

I have a <div> that has a background-color sitting in front of an image. I'm trying to apply a multiply effect using an SVG so that the background image behind the div comes through:

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

Unfortunately, only the solid background color is being changed, and I get no transparency through to the background.

Here's the fiddle: https://jsfiddle.net/0p58bxsp/1/

The effect I'm expecting is something like this:

I know the visual effect could be fudged using an rgba value as the background color, but I'm very specifically looking for the combination of a solid color having a multiply filter applied to it.

Is this a limitation of the current SVG implementation?

Here's the definition of a multiply blend:

Multiply blend mode multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. The result is a darker picture. , where a is the base layer value and b is the top layer value.

As such, using opacity or alpha doesn't give me the exact result that I'm looking for.

---

This was supposed to be possible if you stayed completely within SVG 1.1 by using the BackgroundImage pseudo input - but only IE10 ever supported it for inline SVG (Opera supported it for .svg files). Firefox, Chrome & Safari never supported it, and it's now formally declared "not to be implemented" by folks who work on those browsers.

You can import a copy of the background image using feImage and position it just right to match the actual background exactly. But depending on your design - that could take extensive javascript. And url() filters can behave strangely. https://jsfiddle.net/0p58bxsp/3/ shows how to do this - but it also surfaces a regression bug in Chrome with positioned primitives which will be fixed in next 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(and only Safari 9) has a "backdrop-filter" that will do this, and you can also specify a mix-blend-mode which has broader support, but this is still pretty edge.

If you need a multiply blend, it might be best to just keep everything in SVG.

---

You should add opacity: 0.4; into effect class. It will work fine.

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

---

As far as I know, svg effects are limited to the elements itself. You can't use it to mix with another element.

You can however get this effect with standard CSS mix-blend-mode

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

链接地址: http://www.djcxy.com/p/87074.html

上一篇: CSS背景

下一篇: 将SVG过滤器应用于div的背景