opacity on a box containing a raster <img>
opacity: 0.5 (img child)
opacity on a gradient background
opacity: 0.5 (gradient background)
Each stage has a checkerboard-ish backdrop so translucency is visible. This exercises the isolated-transparency-group implementation (docs/html-css-support.md#opacity, docs/supported-svg-features.md).
opacity: 1 (baseline) opacity: 1 | opacity: 0.7 opacity: 0.7 | opacity: 0.3 opacity: 0.3 | opacity: 0 (invisible) opacity: 0 |
The overlap should look like a single flat blend, not a darker double-blend - this is the isolated transparency-group fix in action.
two opaque overlapping boxes (baseline) no opacity - opaque overlap | parent opacity:0.5, opaque children parent opacity: 0.5 (children opaque) | nested opacity compounding parent 0.6 × child 0.6 = 0.36 effective | opacity + transform combined opacity: 0.5; transform: rotate(15deg) |
opacity on a box containing a raster <img> opacity: 0.5 (img child) | opacity on a gradient background opacity: 0.5 (gradient background) |
SVG group opacity now uses the same isolated-transparency-group compositing as CSS opacity - the overlap below should also look like a single flat blend.
<g opacity="0.5"> with overlapping shapes <g opacity="0.5">, two overlapping rects | leaf fill-opacity vs group opacity group opacity 0.6 × leaf fill-opacity 0.5 |