[webkit-dev] Adding blending mode to background images

[Rik Cabanier]

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'/>

</div>



1:
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#mix-blend-mode

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>