Full version, Basic version

Specification link: 14.5 Object and group opacity: the 'opacity' property

masking-mask-01-b ← index → masking-path-01-b

# masking-opacity-01-b
SVG Image | PNG Image
masking-opacity-01-b Test to see the effect of applying an opacity property to a group. Test for opacity property on a group. Group opacity: 1 Blue rectangle opacity: 1 Green rectangle opacity: 1 Group opacity: 0.5 Blue rectangle opacity: 1 Green rectangle opacity: 1 Group opacity: 1 Blue rectangle opacity: 0.5 Green rectangle opacity: 0.5 Group opacity: 0.5 Blue rectangle opacity: 0.5 Green rectangle opacity: 0.5 $Revision: 1.6 $ |

Test to see the effect of applying an opacity property to a group.

A blue rectangle with a green rectangle on top are contained in a group. This opacity of the group and the opacity of the rectangles are changed in this test. A red rectangle is provided in the background so that opacity changes are obvious visually.

From top to bottom, the tests are as follows.

In the top test, the opacities of the group and the individual rectangles are all set to 1. As a result, the green rectangle should appear on top of the blue rectangle.

In the second test, the group is given an opacity of 0.5. As a result, the blue rectangle should not show through in the region where the green and blue overlap.

In the third test, the group maintains a group opacity of 1 whereas each individual rectangle is given an opacity of 0.5 in the group. As a result, the blue rectangle should show through in the overlap region.

Lastly, the group and individual rectangles are all given an opacity of 0.5. The result should be similar to the previous test only fainter (because the opacity) is resulting in less contribution.

The rendered picture should match the reference image exactly, except for possible variations in the labelling text (per CSS2 rules).

masking-mask-01-b ← index → masking-path-01-b