I have some graphic drawings of the floors of a hours that I want to display on a web page. Drawn in GIMP, there are several layers all with "normal" mode:
From bottom to top, the layers are:
- ground (grass and building outline)
- first floor, with shutters outside the window
- ground copy to cover those shutters
- 67% opaque black "scrim"
- second floor
If there was no "ground copy" then the shutters from the first floor would be visible when viewing the second floor and, because they're black, not be distinguished as "behind the scrim" and thus on a lower level. It doesn't look good and sometimes they clash with shutters from second-floor windows. Hence: Just remove them by copying the ground over them.
The result, when composited in GIMP is this:
For my web page, I want the "ground" level to always exist and just change floor graphics. The first floor has only "on" or "off" transparency and works fine. The second floor, with collapses the top 4 layers (including the scrim), ends up like this:
You'll note that the "ground cover" is opaque (but dimmed) while the "scrim" is partially (33%) transparent.
If I composite only that merged overlay with the original "ground" layer in GIMP, I get something identical to the original composited image, which is as you'd expect.
However, when I place the composited "second floor" layer over the "ground" layer on my web page, it doesn't behave the same. I get this:
You can see that all the opaque areas of the second floor appear correctly but the "ground" behind it is much dimmer, passing maybe 1/2 as much color at a guess.
There is no CSS. It's currently just two overlaid images:
<html>
<head></head>
<body>
<div style="position: absolute;"><img src="1.png"></div>
<div style="position: absolute;"><img src="2.png"></div>
</body>
</html>
Can anybody explain why my web browser (Chrome) would composite two graphic layers differently than GIMP?
