I'd like to have a button with a black background and white text. But the catch is the whole thing has to be 50% transparent. So the intended result is 0.5 * black + 0.5 * background for the button back and 0.5 * white + 0.5 * background for the text.
I've tried setting opacity: 0.5. The back of the button looks ok but the text is too dark, because it inherits the opacity and is still in front of the button back. So I end up with 0.5 * white + 0.5 * (0.5 * dark back + 0.5 * background), which comes down to 0.25 * background + 0.75 * 66% white.
The same goes for when I set the back color to rgba(0, 0, 0, 0.5). The button back looks good but what do I set the text to? If I make it rgba(255, 255, 255, 0.5) I get the exact same thing I got when setting opacity. If I make it opaque it won't blend with the background.
The perfect solution would first put the white text on the black button and then blend the result with the background. Or maybe prevent the button back to appear where the text is?
This is what needsOffscreenAlphaCompositing is for. The button and text will be rendered offscreen first, and the result will be given opacity instead of the individual elements.