W3C home > Mailing lists > Public > www-style@w3.org > February 2017

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

From: Eric A. Meyer <eric@meyerweb.com>
Date: Thu, 23 Feb 2017 09:26:19 -0500
To: "L. David Baron" <dbaron@dbaron.org>
Cc: www-style@w3.org
Message-ID: <6345E962-C6E7-4D15-A454-4AE1AC3AE740@meyerweb.com>
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:06 UTC