Re: [csswg-drafts] idea: CSS non-multiplicative opacity-override property (#10214)

The issue here is that descendants' opacities aren't "derived from multiplying with ancestor opacities". A descendant with `opacity: 1` has opacity 1 - it's fully opaque. But the partially-transparent ancestor draws all of its descendants onto itself, as a single graphics layer, then applies opacity to that single resulting image. This is *very very different* from each element painting *itself* partially-transparent and then all stacking together (which is roughly what happens with @cdoublev's example code).

Because everything is composited together into a single image, if you want something to not be composited with the group, it has to exist fully outside of the group - either completely above everything or completely below everything. Outside of some rare exceptions (top layer, mostly), the DOM's painting model implies that the element isn't a descendant of the partially-transparent ancestor at all.

Fundamentally, what's going on here is the difference between group opacity and item opacity. You can find tons of tutorials explaining the same thing (and people asking this exact same question) for graphics programs.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10214#issuecomment-2062254816 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 17 April 2024 20:45:07 UTC