[webkit-dev] Adding blending mode to background images

Rik Cabanier cabanier at gmail.com
Fri Feb 1 13:11:57 PST 2013

you will be able to do this by using the fully featured 'mix-blend-mode'
property [1].

for instance, if you want 2 images to blend with each other, but not with
their background:

<div style="isolation: isolate"> <- anything that creates a stacking context

<img src='foo.png'/>
<img src='bar.png' style='mix-blend-mode: difference'/>



On Fri, Feb 1, 2013 at 1:01 PM, Benjamin Poulain <benjamin at webkit.org>wrote:

> On Fri, Feb 1, 2013 at 12:44 PM, Rik Cabanier <cabanier at gmail.com> wrote:
>> background-image: url(a.png), url(b.png);
>> -webkit-background-blend-mode: screen, screen;
> Out of curiosity:
> I am probably way too late for the party, but why not blend
> surface-to-surface? E.g.
>     background-image: blend(url(foo.png), url(bar.png), difference).
> This is in order to easily stack them:
>     background-image: blend(blend(url(foo.png), url(bar.png), difference),
> url(giraffe.gif), screen).
> Although, maybe we don't want that as it could get more difficult to
> optimize...
> Benjamin
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20130201/8d06a6c4/attachment.html>

More information about the webkit-dev mailing list