- From: L. David Baron <dbaron@dbaron.org>
- Date: Wed, 22 Feb 2017 20:51:57 -0800
- To: "Eric A. Meyer" <eric@meyerweb.com>
- Cc: www-style@w3.org
- Message-ID: <20170223045157.yyhzcg6gki37mja3@pescadero.dbaron.org>
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.
...
# The background-blend-mode list must be applied in the same order
# as background-image [CSS3BG]. This means that the first element
# in the list will apply to the layer that is on top. If a
# property doesn’t have enough comma-separated values to match the
# number of layers, the UA must calculate its used value by
# repeating the list of values until there are enough.
(I think it would be clearer if this said "layers that are below it"
rather than "layer that is below it".)
So, assuming that the background-blend-mode and background-image
properties have the same number of items (i.e., that there hasn't
been repeating or truncation of the list from
background-blend-mode), it runs from fourth to first (i.e., from
back to front):
Step A: Composite layer 4 with background-color.
Step B: Composite layer 3 with result of Step A.
Step C: Composite layer 2 with result of Step B.
Step D: Composite layer 1 with result of Step C.
Step E: Draw the result of step D as part of the element.
> 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:
<!DOCTYPE html>
<style>
div { position: absolute; top: 0; left: 0; width: 100px; height: 100px }
.layer1 { background-color: rgba(204, 55, 102, 0.6) }
.layer2 { background-color: rgba(55, 102, 204, 0.6) }
.layer3 { background-color: rgb(102, 204, 55); } /* could be background-color */
.blend { mix-blend-mode: darken }
.isolate { isolation: isolate }
</style>
<!-- left rectangle (how background-blend-mode actually blends layers) -->
<div class="isolate">
<div class="layer3 blend"></div>
<div class="layer2 blend"></div>
<div class="layer1 blend"></div>
</div>
<!-- middle rectangle (another way to represent how background-blend-mode actually blends layers, although maybe a little fishy in the choice of which elements get class="blend") -->
<div class="isolate" style="left: 100px">
<div class="blend">
<div class="layer3"></div>
<div class="layer2 blend"></div>
</div>
<div class="layer1 blend"></div>
</div>
<!-- right rectangle (blending the top layers first; background-blend-mode doesn't do this -->
<div class="isolate" style="left: 200px">
<div class="layer3 blend"></div>
<div class="blend">
<div class="layer2"></div>
<div class="layer1 blend"></div>
</div>
</div>
-David
--
𝄞 L. David Baron http://dbaron.org/ 𝄂
𝄢 Mozilla https://www.mozilla.org/ 𝄂
Before I built a wall I'd ask to know
What I was walling in or walling out,
And to whom I was like to give offense.
- Robert Frost, Mending Wall (1914)
Received on Thursday, 23 February 2017 04:53:20 UTC