Re: [compositing] background-blend-mode blending order

On 22 Feb 2017, at 23:51, L. David Baron wrote:

> On Wednesday 2017-02-22 22:46 -0500, Eric A. Meyer wrote:
>
>> I'm trying to get a real handle on 'background-blend-mode' and am 
>> unable to
>> work out: what's the ordering of compositing multiple background 
>> images?  If
>> there are, say, four background layers, are the first and second 
>> layer
>> composited, then the result composited with the third, then that 
>> result
>> composited with the fourth?  Or does it run from fourth to first?
>
> https://drafts.fxtf.org/compositing-1/#background-blend-mode says:
>
>   # Each background layer must blend with the element’s background
>   # layer that is below it and the element’s background color.
>   # Background layers must not blend with the content that is behind
>   # the element, instead they must act as if they are rendered into
>   # an isolated group.
>
> (I think it would be clearer if this said "layers that are below it"
> rather than "layer that is below it".)

Ahhh yes-- thank you!  I had read that passage but failed to grasp its 
importance.  My spec-reading skills seem to have gone a bit rusty.

>> Or does it even matter?  I've been trying to construct a test that 
>> gets a
>> different result if a consistent blending order is applied to a 
>> different
>> ordering of the layers, and have so far failed to find such a case.
>
> Here's an example that shows a difference (demonstrating the
> difference using mix-blend-mode), using a 'darken' blend mode:

Thanks again.  This led me to a test that also shows some pretty 
dramatic differences:

div {height: 100px; width: 100px;}
.bbm {background:
  linear-gradient(to bottom, #00F, #FFF),
  linear-gradient(to right, #F00, #FFF),
  gray;}
.bbm2 {background:
  linear-gradient(to right, #F00, #FFF),
  linear-gradient(to bottom, #00F, #FFF),
  gray;}
.dbn {background-blend-mode: color-dodge, color-burn, normal;}
.bdn {background-blend-mode: color-burn, color-dodge, normal;}

<div class="bbm dbn"></div>
<div class="bbm bdn"></div>

<div class="bbm2 dbn"></div>
<div class="bbm2 bdn"></div>


--
Eric A. Meyer - http://meyerweb.com/

Received on Thursday, 23 February 2017 14:27:10 UTC